Player Flip Cards

Developer
Nick Nikolov
Size
4,314 Kb
Views
18,216
  1. Player Flip Cards Previews
  2. Player Flip Cards HTML Codes
  3. Player Flip Cards CSS Codes

How do I make an player flip cards?

A simple css only flip cards.. What is a player flip cards? How do you make a player flip cards? This script and codes were developed by Nick Nikolov on 16 October 2022, Sunday.

Player Flip Cards Previews
IQ Test

Player Flip Cards - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Player Flip Cards</title> <link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Roboto+Condensed:400,300'> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ html { background: #222;
}
.container { text-align: center;
}
.card { font-family: 'Roboto Condensed', Arial, sans-serif; -webkit-perspective: 1500; -webkit-transform-style: preserve-3d; position: relative; height: 300px; width: 200px; display: inline-block; margin: 0 10px;
}
.card .front,
.card .back { overflow: hidden; text-align: left; box-shadow: rgba(0, 0, 0, 0.7) 0 2px 6px -2px; background: #fff; border-radius: 10px; backface-visibility: hidden; background-color: #222; color: #fff; position: absolute; top: 0; left: 0; right: 0; bottom: 0; transition: all 0.3s ease-in-out;
}
.card .front { background-size: cover; background-repeat: no-repeat; background-position: center center; transform: rotateY(0); z-index: 2;
}
.card .front .title { text-shadow: rgba(0, 0, 0, 0.5) 0 1px 1px; position: absolute; bottom: 0; left: 0; right: 0; padding: 10px; background-color: rgba(0, 0, 0, 0); background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, 0.5))); background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5)); background: -moz-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5)); background: -ms-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5)); background: -o-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5));
}
.card .front .title h2 { margin: 0; padding: 0; font-weight: 300; font-size: 32px;
}
.card .back { background: #333; transform: rotateY(-180deg); padding: 20px;
}
.card .back p { margin: 0 0 20px 0;
}
.card .back .btn { position: absolute; bottom: 20px; left: 20px; right: 20px;
}
.card .btn { padding: 10px; display: block; color: inherit; border: 1px solid #fff; text-decoration: none; border-radius: 6px; text-align: center;
}
.card .btn:hover { background-color: rgba(255, 255, 255, 0.1);
}
.card:hover .front { transform: rotateY(180deg);
}
.card:hover .back { transform: rotateY(0);
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <div class="container">	<div class="card"> <div class="front" style="background-image: url('http://kanal5.com.mk/uploads/mesi-39-.jpg')"> <div class="title"> <h2>Lionel<br/>Messi</h2> </div> </div> <div class="back"> <p>Lionel Andrés "Leo" Messi Cuccittini is an Argentine professional footballer who plays as a forward for Spanish club FC Barcelona.</p> <a class="btn" href="http://en.wikipedia.org/wiki/Lionel_Messi">View profile</a> </div> </div> <div class="card"> <div class="front" style="background-image: url('https://3.bp.blogspot.com/-Ojf1mVqggcQ/TsBYjmLiBWI/AAAAAAAAAhw/fDDzW_zst6w/s1600/Dimitar+Berbatov+Manchester+united+vs+sunderland+fc.jpg')">	<div class="title"> <h2>Dimitar<br/>Berbatov</h2> </div> </div> <div class="back"> <p>Dimitar Ivanov Berbatov; born 30 January 1981 is a Bulgarian professional footballer who plays as a striker for AS Monaco.</p> <a class="btn" href="http://en.wikipedia.org/wiki/Dimitar_Berbatov">View profile</a> </div> </div> <div class="card"> <div class="front" style="background-image:url('http://football-uniform.up.n.seesaa.net/football-uniform/image/Bulgaria-94-adidas-white-white-white.JPG?d=a0')"> <div class="title"> <h2>Hristo<br/>Stoichkov</h2> </div> </div> <div class="back"> <p>Hristo Stoichkov Stoichkov is a retired Bulgarian footballer who is currently a football pundit for Univision Deportes.</p> <a class="btn" href="http://en.wikipedia.org/wiki/Hristo_Stoichkov">View profile</a> </div> </div>	</div>
</body>
</html>

Player Flip Cards - Script Codes CSS Codes

html { background: #222;
}
.container { text-align: center;
}
.card { font-family: 'Roboto Condensed', Arial, sans-serif; -webkit-perspective: 1500; -webkit-transform-style: preserve-3d; position: relative; height: 300px; width: 200px; display: inline-block; margin: 0 10px;
}
.card .front,
.card .back { overflow: hidden; text-align: left; box-shadow: rgba(0, 0, 0, 0.7) 0 2px 6px -2px; background: #fff; border-radius: 10px; backface-visibility: hidden; background-color: #222; color: #fff; position: absolute; top: 0; left: 0; right: 0; bottom: 0; transition: all 0.3s ease-in-out;
}
.card .front { background-size: cover; background-repeat: no-repeat; background-position: center center; transform: rotateY(0); z-index: 2;
}
.card .front .title { text-shadow: rgba(0, 0, 0, 0.5) 0 1px 1px; position: absolute; bottom: 0; left: 0; right: 0; padding: 10px; background-color: rgba(0, 0, 0, 0); background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, 0.5))); background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5)); background: -moz-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5)); background: -ms-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5)); background: -o-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5));
}
.card .front .title h2 { margin: 0; padding: 0; font-weight: 300; font-size: 32px;
}
.card .back { background: #333; transform: rotateY(-180deg); padding: 20px;
}
.card .back p { margin: 0 0 20px 0;
}
.card .back .btn { position: absolute; bottom: 20px; left: 20px; right: 20px;
}
.card .btn { padding: 10px; display: block; color: inherit; border: 1px solid #fff; text-decoration: none; border-radius: 6px; text-align: center;
}
.card .btn:hover { background-color: rgba(255, 255, 255, 0.1);
}
.card:hover .front { transform: rotateY(180deg);
}
.card:hover .back { transform: rotateY(0);
}
Player Flip Cards - Script Codes
Player Flip Cards - Script Codes
Home Page Home
Developer Nick Nikolov
Username necks
Uploaded October 16, 2022
Rating 3
Size 4,314 Kb
Views 18,216
Do you need developer help for Player Flip Cards?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Nick Nikolov (necks) Script Codes
Name
Simple drawer menu
Simple grid layout
4 color border for highlighting feature elements
User Icons
SVG Clock
60fps animated SVG waves hero
Page header bar toggle on scroll
Subtle site navigation with description
A Pen by Nick Nikolov
Range bar with indicator
Create amazing blog posts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!