آموزش ساخت صفحه ریسپانسیو با CSS3


بخش CSS

* {
margin:0;
padding:0;
box-sizing:border-box;

}
body {
background:#262626;
}
section{
position:fixed;
width:100%;
height:100%;
display:flex;
justify-content:center;
align-items:center;
}
ul{
display:flex;
flex-direction:column;
}
ul li{
list-style:none;
}
ul li a{
display:block;
text-decoration:none;
text-align:center;
font-size:3em;
font-weight:700;
color:#fff;
text-transform:uppercase;
}

ul li a::before{
content:attr(data-text);
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
overflow:hidden;
z-index:-1;
text-align:center;
font-size:3em;
color:#2196f3;
opacity:0;
transition:.5s;
line-height:100vh;
}

ul li:hover a::before {
opacity:1;

}

بخش HTML

<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″ />
<link href=”StyleSheet.css” rel=”stylesheet” />
<title></title>
</head>
<body>
<section>
<ul>
<li><a href=”#” data-text=”Home”>Home</a></li>
<li><a href=”#” data-text=”About”>About</a></li>
<li><a href=”#” data-text=”Sevices”>Sevices</a></li>
<li><a href=”#” data-text=”Team”>Team</a></li>
<li><a href=”#” data-text=”Contact”>Contact</a></li>
</ul>
</section>
</body>
</html>

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

Fill out this field
Fill out this field
لطفاً یک نشانی ایمیل معتبر بنویسید.
You need to agree with the terms to proceed

فهرست