9 types of pure CSS3 character information card uidesign results, css3ui

9 types of pure CSS3 character information card uidesign results, css3ui

This is a set of CSS 3 character information cards. There are nine effects in this group of character information cards. Each effect uses CSS3 to deform the image and HTML elements to generate a very beautiful animation effect.

 

Download Online Preview source code

Method of use: HTML Structure

The basic HTML structure of the character information card is as follows:

<Div class = "single-member effect-3"> <div class = "member-image">  </div> <div class = "member-info"> CSS style
Add some general styles for the card:
.single-member{  width: 280px;   float: left;   font-family: sans-sarif;   margin: 30px 2.5%;   background-color: #fff;   text-align: center;   position: relative;}.member-image img{  max-width: 100%;   vertical-align: middle;}h3 {  font-size: 24px;   font-weight: normal;   margin: 10px 0 0;   text-transform: uppercase;}h5 {  font-size: 16px;   font-weight: 300;   margin: 0 0 15px;   line-height: 22px;}p {font-size: 14px;   font-weight: 300;   line-height: 22px;   padding: 0 30px;   margin-bottom: 10px;}.social-touch a{  display: inline-block;   width: 27px;   height: 26px;   vertical-align: middle;   margin: 0 2px;   background-image: url(images/social-icons.png);   background-repeat: no-repeat;   opacity: 0.7;   transition: 0.3s;}.social-touch a:hover{  opacity: 1;   transition: 0.3s;}.fb-touch{  background-position: 0 0;}.tweet-touch{  background-position: -35px 0;}.linkedin-touch{  background-position: -71px 0;}.icon-colored .fb-touch{  background-position: 0 -27px;}.icon-colored .tweet-touch{  background-position: -35px -27px;}.icon-colored .linkedin-touch{  background-position: -71px -27px;}                 
 
For other CSS codes, see download files.
Download Online Preview source code