Личная карточка портфолио
Пожалуй такая штучка нужна многим дизайнерам и разработчикам в которой вы могли бы написать род своих занятий, как с вами связаться и т.д. и все это в небольшом, но красиво оформленном блоке.
Для начала напишем HTML разметку
Теперь напишем CSS код
Как всегда нам не обойтись без сброса стилей, тут мы будем использовать маленький сброс, затрагивающий лишь те элементы которые будут использованы
Ну а теперь все остальные стили
Ну вот и все, можете форматировать на свой вкус, думаю нет смысла объяснять как писать каждый стиль пошагово. Пользуйтесь, если будут вопросы, пишите их в комментариях!
Для начала напишем HTML разметку
Код
<!DOCTYPE HTML>
<html lang="ru">
<head>
<meta charset="utf-8">
<title>HTML5 - CSS3 Личная карточка портфолио</title>
<!--[if IE]>
<script src="http://rhtml5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<div id="content">
<div class="vcard-freebie">
<div class="content-wrapper-front">
<div id="fpc_corner-box">
<a id="fpc_page-tip" href="#" title="Скачать мои работы">
<div id="fpc_corner-contents">
<div id="fpc_corner-button"></div>
</div>
</a>
</div>
<div class="header">
<span class="title">Личная карточка</span>
<div class="underline"></div>
</div>
<div class="avatar" style="background-image: url(images/avatar.png)"></div>
<div class="aboutme">
<strong>О себе</strong>
<div class="underline"></div>
<div id="text">Я начинающий веб-дизайнер и в настоящее время проживаею в Нидерландах.</div>
</div>
<div style="clear:both;"></div>
<ul class="socialicons">
<li class="dribble"><a href="#"></a></li>
<li class="email"><a href="#"> </a></li>
<li class="twitter"><a href="#"> </a></li>
</ul>
</div>
</div>
</div>
</body>
</html>
<html lang="ru">
<head>
<meta charset="utf-8">
<title>HTML5 - CSS3 Личная карточка портфолио</title>
<!--[if IE]>
<script src="http://rhtml5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<div id="content">
<div class="vcard-freebie">
<div class="content-wrapper-front">
<div id="fpc_corner-box">
<a id="fpc_page-tip" href="#" title="Скачать мои работы">
<div id="fpc_corner-contents">
<div id="fpc_corner-button"></div>
</div>
</a>
</div>
<div class="header">
<span class="title">Личная карточка</span>
<div class="underline"></div>
</div>
<div class="avatar" style="background-image: url(images/avatar.png)"></div>
<div class="aboutme">
<strong>О себе</strong>
<div class="underline"></div>
<div id="text">Я начинающий веб-дизайнер и в настоящее время проживаею в Нидерландах.</div>
</div>
<div style="clear:both;"></div>
<ul class="socialicons">
<li class="dribble"><a href="#"></a></li>
<li class="email"><a href="#"> </a></li>
<li class="twitter"><a href="#"> </a></li>
</ul>
</div>
</div>
</div>
</body>
</html>
Теперь напишем CSS код
Как всегда нам не обойтись без сброса стилей, тут мы будем использовать маленький сброс, затрагивающий лишь те элементы которые будут использованы
Код
*
{
box-sizing: border-box !important;
font-family: Helvetica,"Helvetica neue", Arial, sans-serif;
font-size: 12px;
list-style: none;
margin: 0;
-moz-box-sizing: border-box !important;
ms-box-sizing: border-box !important;
outline: 0;
padding: 0;
text-decoration: none;
-webkit-box-sizing: border-box !important;
}
{
box-sizing: border-box !important;
font-family: Helvetica,"Helvetica neue", Arial, sans-serif;
font-size: 12px;
list-style: none;
margin: 0;
-moz-box-sizing: border-box !important;
ms-box-sizing: border-box !important;
outline: 0;
padding: 0;
text-decoration: none;
-webkit-box-sizing: border-box !important;
}
Ну а теперь все остальные стили
Код
body
{
background: #c9d2da;
color: #b1b1b1;
font-family: 10pt/1.5em Helvetica,"Helvetica neue", Arial, sans-serif;
}
#content
{
display: table;
margin: 0 auto;
padding: 30px;
}
.vcard-freebie
{
border: 1px solid #bec6cd;
box-shadow: 0px 1px 2px 0px #777;
moz-box-shadow: inset 0 1px 1px 2px rgba(255,255,255,0.9);
webkit-box-shadow: inset 0 1px 1px 2px rgba(255,255,255,0.9);
width:78%;
margin: 100px auto;
}
.content-wrapper-front
{
background: #dce5e9;
background: linear-gradient(to bottom, #dce5e9 0%,#f0f5f6 100%);
background: -moz-linear-gradient(top, #e4e9ec 50%, #f0f5f6 100%);
background: -ms-linear-gradient(top, #e4e9ec 50%,#f0f5f6 100%);
background: -o-linear-gradient(top, #e4e9ec 50%,#f0f5f6 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#dce5e9), color-stop(100%,#f0f5f6));
background: -webkit-linear-gradient(top, #dce5e9 0%,#fcfdfd 100%);
box-shadow: inset 0 0px 1px 2px rgba(250,251,251,0.9);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e4e9ec', endColorstr='#f0f5f6',GradientType=0 );
padding: 10px;
position: relative;
padding-bottom:30px;
}
.header
{
margin-left: 13px;
margin-top: 13px;
}
.title
{
color: #7b8f9f;
font-size: 13px;
font-weight: 500;
text-shadow: 0px 1px #ffffff;
}
.header .underline
{
background: #b2bec5;
height: 1px;
margin-top: 5px;
width: 100px;
}
.underline
{
background: #b2bec5;
height: 1px;
margin-top: 5px;
width: 40px;
}
.avatar
{
background: no-repeat ;
color: #7b8f9f;
float: left;
width:39%;
margin-left:8px;
height:121px;
}
.aboutme
{
float: left;
font-weight: 500;
margin-top: 8%;
width:47%;
color: #7B8F9F;
text-shadow: 0px 1px #ffffff;
}
#text
{
padding-top:6px;
}
.socialicons
{
float: left;
width: 100px;
margin-left:33px;
}
.socialicons li a
{
background: url(../images/social-icons.png) no-repeat top left;
display: block;
float: left;
height: 48px;
text-indent: -9999px;
width: 53px;
}
.socialicons .dribble a
{
background-position: 0px -8px;
height: 20px;
width: 25px;
}
.socialicons .dribble a:hover
{
background-position: 0 -36px;
height: 20px;
width: 25px;
}
.socialicons .email a
{
background-position: -25px -8px;
height: 20px;
width: 25px;
}
.socialicons .email a:hover
{
background-position: -25px -36px;
height: 20px;
width: 25px;
}
.socialicons .twitter a
{
background-position: -50px -8px;
height: 20px;
width: 25px;
}
.socialicons .twitter a:hover
{
background-position: -50px -36px;
height: 20px;
width: 25px;
}
.socialicon li
{
background-color: #eee;
border: 1px solid;
border-color: #f3f3f3 #bbb #bbb #f3f3f3;
display: inline;
padding: .5em;
zoom: 1;
}
#fpc_page-tip:before, #fpc_page-tip:after {
background-color: #FFF;
position: absolute;
display: block;
z-index: 2;
border-top-right-radius: 30%;
width: 100%;
height: 100%;
content: "";
border-right: solid 1px #f9f9f9;
border-top: solid 2px #f9f9f9;
}
#fpc_page-tip:before {
right: 100%;
top: 0%;
background: -webkit-radial-gradient(-90% 180%, circle, rgba(255,255,255,0) 80%, rgba(0,0,0,.2) 100%);
background: -moz-radial-gradient(-90% 180%, circle, rgba(255,255,255,0) 80%, rgba(0,0,0,.1) 100%);
background: -o-radial-gradient(-90% 180%, circle, rgba(255,255,255,0) 88%, rgba(0,0,0,.1) 100%);
background: -ms-radial-gradient(-90% 180%, circle, rgba(255,255,255,0) 88%, rgba(0,0,0,.1) 100%);
}
.content-wrapper-front:hover #fpc_page-tip:before {
border-right: solid 2px #fff;
}
.content-wrapper-front div#fpc_corner-box:hover #fpc_page-tip:before {
border-right: solid 2px #fff;
}
#fpc_page-tip:after {
top: 100%;
right: 0%;
background: -webkit-radial-gradient(-90% 190%, circle, rgba(255,255,255,0) 80%, rgba(0,0,0,0.2) 100%);
/* background: -webkit-radial-gradient(-250% 320%, circle, rgba(255,255,255,0) 80%, rgba(211,211,211,0.9) 100%);*/
background: -moz-radial-gradient(-90% 190%, circle, rgba(255,255,255,0) 80%, rgba(0,0,0,0.1) 100%);
background: -o-radial-gradient(-90% 190%, circle, rgba(255,255,255,0) 88%, rgba(0,0,0,0.1) 100%);
background: -ms-radial-gradient(-90% 190%, circle, rgba(255,255,255,0) 88%, rgba(0,0,0,0.1) 100%);
}
.content-wrapper-front:hover #fpc_page-tip:after {
border-top: solid 2px #fff;
}
.content-wrapper-front div#fpc_corner-box:hover #fpc_page-tip:after {
border-top: solid 2px #fff;
}
#fpc_corner-box {
height: 50px;
width: 50px;
right: 0;
top: 0;
position: absolute;
}
.content-wrapper-front:hover #fpc_corner-box {
height: 70px;
width: 70px;
}
#fpc_corner-box:before {
position: absolute;
top: 0;
right: 0;
content: "";
display: block;
width: 100%;
height: 100%;
}
#fpc_corner-contents:after {
position: absolute;
top: -4px;
right: 0;
content: "";
background: -webkit-linear-gradient(45deg, rgba(255,255,255,0) 07%, #ddd 66%, rgba(255,255,255,0.2) 66%, rgba(255,255,255,0) 67%), -webkit-radial-gradient(-50% 150%, circle, transparent 74%, rgba(0,0,0,0.2) 74%, transparent 81%);
background: -moz-linear-gradient(45deg, rgba(228,233,236,1) 67%, rgb(227,235,238), rgb(220,229,233) 66%, rgba(255,255,255,0) 67%), -moz-radial-gradient(-50% 150%, circle, transparent 1%, rgba(0,0,0,0.2) 74%, transparent 81%);
background: -o-linear-gradient(45deg, rgba(228,233,236,1) 66%, #ddd 66%, rgba(255,255,255,0.1) 66%, rgba(255,255,255,0) 17%), -o-radial-gradient(-50% 150%, circle, transparent 100%, rgba(0,0,0,0.9) 74%, transparent 81%);
background: -ms-linear-gradient(45deg, rgba(228,233,236,1) 66%, #ddd 14%, rgba(255,255,255,0.2) 66%, rgba(255,255,255,0) 67%), -ms-radial-gradient(-50% 150%, circle, transparent 74%, rgba(0,0,0,0.2) 74%, transparent 81%);
display: block;
width: 150%;
height: 150%;
}
#fpc_page-tip {
position: absolute;
top: 0;
right: 0;
background: -webkit-linear-gradient(45deg, #ddd 17%, #dfdfdf 18%, #f5f5f5 30%, #f8f8f8 34%, #eee 39%, rgba(200,200,200,0) 41%);
background: -ms-linear-gradient(45deg, #ddd 17%, #dfdfdf 18%, #f5f5f5 30%, #f8f8f8 34%, #eee 39%, rgba(200,200,200,0) 41%);
background: -moz-linear-gradient(45deg, #ddd 17%, #dfdfdf 18%, #f5f5f5 30%, #f8f8f8 34%, #eee 39%, rgba(200,200,200,0) 41%);
background: -o-linear-gradient(45deg, #ddd 17%, #dfdfdf 18%, #f5f5f5 30%, #f8f8f8 34%, #eee 39%, rgba(200,200,200,0) 41%);
display: block;
width: 100%;
height: 100%;
}
#fpc_corner-button {
position: absolute;
width: 8em;
height:11em;
top: 0;
right: 0;
background: url(../images/arrow.png) no-repeat #dce6b2 60px 14px ;
color: #fff;
font-family: Verdana, Geneva, sans-serif;
text-align: center;
padding: 8px 5px;
display: inline-block;
font-size: 11px;
}
#fpc_corner-contents {
width: 135%;
position: absolute;
display: block;
overflow: hidden;
-webkit-mask: -webkit-linear-gradient(45deg, transparent 45%, #000 53%);
-webkit-mask: linear-gradient(45deg, transparent 45%, #000 53%);
-webkit-mask: -o-linear-gradient(45deg, transparent 45%, #000 53%);
-webkit-mask: -moz-linear-gradient(45deg, transparent 45%, #000 53%);
-webkit-mask: -ms-linear-gradient(45deg, transparent 45%, #000 53%);
top: 0;
right: 0;
height: 125%;
}
#fpc_corner-box, #fpc_corner-contents, #fpc_page-tip {
-webkit-transition-property: all;
-webkit-transition-duration: .3s;
-webkit-transition-timing-function: cubic-bezier(0, 0.35, .5, 1.7);
-moz-transition-property: all;
-moz-transition-duration: .3s;
-moz-transition-timing-function: cubic-bezier(0, 0.35, .5, 1.7);
-o-transition-property: all;
-o-transition-duration: .3s;
-o-transition-timing-function: cubic-bezier(0, 0.35, .5, 1.7);
-ms-transition-property: all;
-ms-transition-duration: .3s;
-ms-transition-timing-function: cubic-bezier(0, 0.35, .5, 1.7);
}
{
background: #c9d2da;
color: #b1b1b1;
font-family: 10pt/1.5em Helvetica,"Helvetica neue", Arial, sans-serif;
}
#content
{
display: table;
margin: 0 auto;
padding: 30px;
}
.vcard-freebie
{
border: 1px solid #bec6cd;
box-shadow: 0px 1px 2px 0px #777;
moz-box-shadow: inset 0 1px 1px 2px rgba(255,255,255,0.9);
webkit-box-shadow: inset 0 1px 1px 2px rgba(255,255,255,0.9);
width:78%;
margin: 100px auto;
}
.content-wrapper-front
{
background: #dce5e9;
background: linear-gradient(to bottom, #dce5e9 0%,#f0f5f6 100%);
background: -moz-linear-gradient(top, #e4e9ec 50%, #f0f5f6 100%);
background: -ms-linear-gradient(top, #e4e9ec 50%,#f0f5f6 100%);
background: -o-linear-gradient(top, #e4e9ec 50%,#f0f5f6 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#dce5e9), color-stop(100%,#f0f5f6));
background: -webkit-linear-gradient(top, #dce5e9 0%,#fcfdfd 100%);
box-shadow: inset 0 0px 1px 2px rgba(250,251,251,0.9);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e4e9ec', endColorstr='#f0f5f6',GradientType=0 );
padding: 10px;
position: relative;
padding-bottom:30px;
}
.header
{
margin-left: 13px;
margin-top: 13px;
}
.title
{
color: #7b8f9f;
font-size: 13px;
font-weight: 500;
text-shadow: 0px 1px #ffffff;
}
.header .underline
{
background: #b2bec5;
height: 1px;
margin-top: 5px;
width: 100px;
}
.underline
{
background: #b2bec5;
height: 1px;
margin-top: 5px;
width: 40px;
}
.avatar
{
background: no-repeat ;
color: #7b8f9f;
float: left;
width:39%;
margin-left:8px;
height:121px;
}
.aboutme
{
float: left;
font-weight: 500;
margin-top: 8%;
width:47%;
color: #7B8F9F;
text-shadow: 0px 1px #ffffff;
}
#text
{
padding-top:6px;
}
.socialicons
{
float: left;
width: 100px;
margin-left:33px;
}
.socialicons li a
{
background: url(../images/social-icons.png) no-repeat top left;
display: block;
float: left;
height: 48px;
text-indent: -9999px;
width: 53px;
}
.socialicons .dribble a
{
background-position: 0px -8px;
height: 20px;
width: 25px;
}
.socialicons .dribble a:hover
{
background-position: 0 -36px;
height: 20px;
width: 25px;
}
.socialicons .email a
{
background-position: -25px -8px;
height: 20px;
width: 25px;
}
.socialicons .email a:hover
{
background-position: -25px -36px;
height: 20px;
width: 25px;
}
.socialicons .twitter a
{
background-position: -50px -8px;
height: 20px;
width: 25px;
}
.socialicons .twitter a:hover
{
background-position: -50px -36px;
height: 20px;
width: 25px;
}
.socialicon li
{
background-color: #eee;
border: 1px solid;
border-color: #f3f3f3 #bbb #bbb #f3f3f3;
display: inline;
padding: .5em;
zoom: 1;
}
#fpc_page-tip:before, #fpc_page-tip:after {
background-color: #FFF;
position: absolute;
display: block;
z-index: 2;
border-top-right-radius: 30%;
width: 100%;
height: 100%;
content: "";
border-right: solid 1px #f9f9f9;
border-top: solid 2px #f9f9f9;
}
#fpc_page-tip:before {
right: 100%;
top: 0%;
background: -webkit-radial-gradient(-90% 180%, circle, rgba(255,255,255,0) 80%, rgba(0,0,0,.2) 100%);
background: -moz-radial-gradient(-90% 180%, circle, rgba(255,255,255,0) 80%, rgba(0,0,0,.1) 100%);
background: -o-radial-gradient(-90% 180%, circle, rgba(255,255,255,0) 88%, rgba(0,0,0,.1) 100%);
background: -ms-radial-gradient(-90% 180%, circle, rgba(255,255,255,0) 88%, rgba(0,0,0,.1) 100%);
}
.content-wrapper-front:hover #fpc_page-tip:before {
border-right: solid 2px #fff;
}
.content-wrapper-front div#fpc_corner-box:hover #fpc_page-tip:before {
border-right: solid 2px #fff;
}
#fpc_page-tip:after {
top: 100%;
right: 0%;
background: -webkit-radial-gradient(-90% 190%, circle, rgba(255,255,255,0) 80%, rgba(0,0,0,0.2) 100%);
/* background: -webkit-radial-gradient(-250% 320%, circle, rgba(255,255,255,0) 80%, rgba(211,211,211,0.9) 100%);*/
background: -moz-radial-gradient(-90% 190%, circle, rgba(255,255,255,0) 80%, rgba(0,0,0,0.1) 100%);
background: -o-radial-gradient(-90% 190%, circle, rgba(255,255,255,0) 88%, rgba(0,0,0,0.1) 100%);
background: -ms-radial-gradient(-90% 190%, circle, rgba(255,255,255,0) 88%, rgba(0,0,0,0.1) 100%);
}
.content-wrapper-front:hover #fpc_page-tip:after {
border-top: solid 2px #fff;
}
.content-wrapper-front div#fpc_corner-box:hover #fpc_page-tip:after {
border-top: solid 2px #fff;
}
#fpc_corner-box {
height: 50px;
width: 50px;
right: 0;
top: 0;
position: absolute;
}
.content-wrapper-front:hover #fpc_corner-box {
height: 70px;
width: 70px;
}
#fpc_corner-box:before {
position: absolute;
top: 0;
right: 0;
content: "";
display: block;
width: 100%;
height: 100%;
}
#fpc_corner-contents:after {
position: absolute;
top: -4px;
right: 0;
content: "";
background: -webkit-linear-gradient(45deg, rgba(255,255,255,0) 07%, #ddd 66%, rgba(255,255,255,0.2) 66%, rgba(255,255,255,0) 67%), -webkit-radial-gradient(-50% 150%, circle, transparent 74%, rgba(0,0,0,0.2) 74%, transparent 81%);
background: -moz-linear-gradient(45deg, rgba(228,233,236,1) 67%, rgb(227,235,238), rgb(220,229,233) 66%, rgba(255,255,255,0) 67%), -moz-radial-gradient(-50% 150%, circle, transparent 1%, rgba(0,0,0,0.2) 74%, transparent 81%);
background: -o-linear-gradient(45deg, rgba(228,233,236,1) 66%, #ddd 66%, rgba(255,255,255,0.1) 66%, rgba(255,255,255,0) 17%), -o-radial-gradient(-50% 150%, circle, transparent 100%, rgba(0,0,0,0.9) 74%, transparent 81%);
background: -ms-linear-gradient(45deg, rgba(228,233,236,1) 66%, #ddd 14%, rgba(255,255,255,0.2) 66%, rgba(255,255,255,0) 67%), -ms-radial-gradient(-50% 150%, circle, transparent 74%, rgba(0,0,0,0.2) 74%, transparent 81%);
display: block;
width: 150%;
height: 150%;
}
#fpc_page-tip {
position: absolute;
top: 0;
right: 0;
background: -webkit-linear-gradient(45deg, #ddd 17%, #dfdfdf 18%, #f5f5f5 30%, #f8f8f8 34%, #eee 39%, rgba(200,200,200,0) 41%);
background: -ms-linear-gradient(45deg, #ddd 17%, #dfdfdf 18%, #f5f5f5 30%, #f8f8f8 34%, #eee 39%, rgba(200,200,200,0) 41%);
background: -moz-linear-gradient(45deg, #ddd 17%, #dfdfdf 18%, #f5f5f5 30%, #f8f8f8 34%, #eee 39%, rgba(200,200,200,0) 41%);
background: -o-linear-gradient(45deg, #ddd 17%, #dfdfdf 18%, #f5f5f5 30%, #f8f8f8 34%, #eee 39%, rgba(200,200,200,0) 41%);
display: block;
width: 100%;
height: 100%;
}
#fpc_corner-button {
position: absolute;
width: 8em;
height:11em;
top: 0;
right: 0;
background: url(../images/arrow.png) no-repeat #dce6b2 60px 14px ;
color: #fff;
font-family: Verdana, Geneva, sans-serif;
text-align: center;
padding: 8px 5px;
display: inline-block;
font-size: 11px;
}
#fpc_corner-contents {
width: 135%;
position: absolute;
display: block;
overflow: hidden;
-webkit-mask: -webkit-linear-gradient(45deg, transparent 45%, #000 53%);
-webkit-mask: linear-gradient(45deg, transparent 45%, #000 53%);
-webkit-mask: -o-linear-gradient(45deg, transparent 45%, #000 53%);
-webkit-mask: -moz-linear-gradient(45deg, transparent 45%, #000 53%);
-webkit-mask: -ms-linear-gradient(45deg, transparent 45%, #000 53%);
top: 0;
right: 0;
height: 125%;
}
#fpc_corner-box, #fpc_corner-contents, #fpc_page-tip {
-webkit-transition-property: all;
-webkit-transition-duration: .3s;
-webkit-transition-timing-function: cubic-bezier(0, 0.35, .5, 1.7);
-moz-transition-property: all;
-moz-transition-duration: .3s;
-moz-transition-timing-function: cubic-bezier(0, 0.35, .5, 1.7);
-o-transition-property: all;
-o-transition-duration: .3s;
-o-transition-timing-function: cubic-bezier(0, 0.35, .5, 1.7);
-ms-transition-property: all;
-ms-transition-duration: .3s;
-ms-transition-timing-function: cubic-bezier(0, 0.35, .5, 1.7);
}
Ну вот и все, можете форматировать на свой вкус, думаю нет смысла объяснять как писать каждый стиль пошагово. Пользуйтесь, если будут вопросы, пишите их в комментариях!
-
FalleN -
2279 -
1 -
228
Но только нужно ставить наверное на те модули которые обновляться должны не раньше через пару тройку минут
С Уважением, Андрей...