• Announcements

    • Dark_s0uL

      ATENTIE   03/09/2019

      [!] ATENTIE!
      Pentru a downloada un fisier aveti nevoie de 10 POSTs/TOPICs . Nu faceti SPAM -> BAN PERMANENT [!] WARNING!
      For to download a file you need to have 10 Posts / Topics [ on forum ]. Don't  do spam or you will be banned permanently !
Sign in to follow this  
Cretu'

[ Tutorial ] Meniu de navigare

Recommended Posts

Tutorial HTML & CSS "Meniu de navigare pagina".
( Pentru acest "poriect" puteti folosi diferite programe, unul dintre ele fiind  sublimetext )

Codul HTML:

<!doctype hml>
<html>
 <head>
 	 <meta charset="utf-8">
 	 <title> Creative Menu Hover Effects</title>
 	 <link rel="stylesheet" href="style.css">
 </head>
 <body>
  <ul>
   <li><a href="#">HOME</a></li>
   <li><a href="#">ABOUT</a></li>
   <li><a href="#">SERVICES</a></li>
   <li><a href="#">PORTOFOLIO</a></li>
   <li><a href="#">PORTOFOLIO</a></li>
   <li><a href="#">OUT TEAM</a></li>
   <li><a href="#">CONTACT US</a></li>
  </ul>
 </body>
</html>   

Codul CSS:

body
{
	margin: 0;
	padding: 0;
	display: flex;
	justify-content: center;
	aling-items: center;
	height: 100vh;
	bacground-image: #112c38;
}
ul
{
	margin: 0;
	padding: 0;
	display: flex;
}
ul li 
{
	list-style: none;
	margin: 0 20px;
	transition: 0.5s;
}
ul li a
{
	display: block;
	position: relative;
	text-decoration: none;
	padding: 5px;
	font-size: 18px;
	font-family: sans-serif;
	color: #fff;
	text-transform: uppercase;
}
ul:hover li a
{
	transform: scale(1.5);
	opacity: .2;
	filter: blur(5px);
}
ul li a:before
{
	content:: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	bacground: #ff497c;
	transition: 0.5s;
	transform-origin: right;
	transfor: scaleX(0);
	z-index: -1;
}
ul li a:hover:before
{
	transition: transform 0.5s;
	transfor-origin: left;
	transforum: scaleX(1);
}

 

REZULTAT:

Quote

HDFdZJ9.png?1

ttaMu6X.png?1

kMWPdi1.png?1

uMvmde3.png?1

 

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this