Jump to content

SUBIECTE NOI
« 1 / 5 »
RSS
Cumparat/Locuit in apartament si ...

Pot folosi sistemul PC pe post de...

Sokol cu distorsiuni de cross-over

Filtru apa potabila cu osmoza inv...
 Kanal D va difuza serialul “...

Upgrade xiaomi mi11

securitate - acum se dau drept - ...

Farmacia Dr Max - Pareri / Sugest...
 De unde cumparati suspensii / gar...

[UNDE] Reconditionare obiecte lemn

Infiltratii casa noua

sugestie usa interior
 ANAF si plata la selfpay

Imprimanta ciss rezista perioade ...

Garmin fēnix 7 / PRO / Saphi...

Care sunt cele mai mari regrete a...
 

Menu cu gradient css3-nu merge tranzitia

- - - - -
Last Updated: Oct 19 2013 16:05, Started by cristirg , Oct 19 2013 16:04  
  ·  
  • Please log in to reply
No replies to this topic

#1
cristirg
Posted 19 October 2013 - 16:05

cristirg

    Senior Member

  • Grup: Senior Members
  • Posts: 7,711
  • Înscris: 16.11.2012
am facut si eu un menu,am folosit css3 pt gradient,am pus si transition dar nu functioneaza tranzitia decat in ie10 (culmea),dar in mozilla,chrome..nu functioneaza,imi puteti zice de ce ,ce e gresit in codul css:

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Menu </title>
<link rel="stylesheet" href="css/style.css" type="text/css">
</head>
<body>
<div id="title">
  <h2>Exemplu meniu</h2>
</div>
<div class="wrapper">
  <ul>
   <li><a href="#"></a></li>
   <li><a href="#">menu2</a></li>
   <li><a href="#">menu3</a></li>
   <li><a href="#">menu4</a></li>
   <li><a href="#">menu5</a></li>
   <li><a href="#">menu6</a></li>
  </ul>
</div>

</body>
</html>
......................................................................................................

@font-face
{
  font-family: 'OpenSans';
  src: url(../fonts/OpenSans-Regular.ttf);
}
@font-face
{
  font-family: 'OpenSans-Light';
  src: url(../fonts/OpenSans-Light.ttf);
}

#title h2 {
font-family: 'OpenSans';
color: #3a4354;
font-size: 20px;
text-align: center;
text-transform: uppercase;
padding-top: 20px;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
#title h2:hover {
color: red;

}

.wrapper {
  display: block;
  width: 980px;
  margin: 0 auto;
  margin-top: 0 !important;
}
ul {
  display: block;
  width: 960px;
  height: 35px;
  margin: 30px auto 0;
  padding-left: 0;
overflow: hidden;
-moz-border-radius: 5px / 4px;
-webkit-border-radius: 5px / 4px;
border-radius: 5px / 4px; /* border radius */
background: #0f1224;
-moz-box-shadow: 0 5px 5px rgba(0,0,0,.2); /* drop shadow */
-webkit-box-shadow: 0 5px 5px rgba(0,0,0,.2); /* drop shadow */
box-shadow: 0 5px 5px rgba(0,0,0,.2); /* drop shadow */

}
ul li {
  height: 33px;
  float: left;
  width: 140px;
  list-style-type: none;
  margin-right: 1px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  -webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
  background-image: -moz-linear-gradient(bottom, #0b196f 0%, #0b196f 50%, #0f2193 51%, #0f2193 100%); /* gradient overlay */
  background-image: -ms-linear-gradient(bottom, #0b196f 0%, #0b196f 50%, #0f2193 51%, #0f2193 100%); /* gradient overlay */
background-image: -o-linear-gradient(bottom, #0b196f 0%, #0b196f 50%, #0f2193 51%, #0f2193 100%); /* gradient overlay */
background-image: -webkit-linear-gradient(bottom, #0b196f 0%, #0b196f 50%, #0f2193 51%, #0f2193 100%); /* gradient overlay */
background-image: linear-gradient(bottom, #0b196f 0%, #0b196f 50%, #0f2193 51%, #0f2193 100%); /* gradient overlay */

}
ul li:hover {
background-image: -moz-linear-gradient(bottom, #e77919 0%, #e77919 50%, #ef9f21 51%, #ef9f21 100%); /* gradient overlay */
background-image: -ms-linear-gradient(bottom, #e77919 0%, #e77919 50%, #ef9f21 51%, #ef9f21 100%); /* gradient overlay */
background-image: -o-linear-gradient(bottom, #e77919 0%, #e77919 50%, #ef9f21 51%, #ef9f21 100%); /* gradient overlay */
background-image: -webkit-linear-gradient(bottom, #e77919 0%, #e77919 50%, #ef9f21 51%, #ef9f21 100%); /* gradient overlay */
background-image: linear-gradient(bottom, #e77919 0%, #e77919 50%, #ef9f21 51%, #ef9f21 100%); /* gradient overlay */
}
ul li:first-child {
  width: 243px;
}
ul li:last-child {
  margin-right: 0;
}

a {
  display: block;
  text-decoration: none;
  color: rgba(255, 255, 255, 0.7);
  font-family: 'OpenSans';
  font-size: 13px;
  line-height: 35px;
  text-align: center;
  font-weight: bold;
  text-transform: uppercase;
  width: 100%;
  height: 33px;
}
ul li:first-child a {
background: url(../img/logo.png) 50% 0 no-repeat !important;
height: 35px;
width: 243px;
margin-top: 7px;
}

Attached Files


Edited by cristirg, 19 October 2013 - 16:07.

Anunturi

Chirurgia endoscopică a hipofizei Chirurgia endoscopică a hipofizei

"Standardul de aur" în chirurgia hipofizară îl reprezintă endoscopia transnazală transsfenoidală.

Echipa NeuroHope este antrenată în unul din cele mai mari centre de chirurgie a hipofizei din Europa, Spitalul Foch din Paris, centrul în care a fost introdus pentru prima dată endoscopul în chirurgia transnazală a hipofizei, de către neurochirurgul francez Guiot. Pe lângă tumorile cu origine hipofizară, prin tehnicile endoscopice transnazale pot fi abordate numeroase alte patologii neurochirurgicale.

www.neurohope.ro
Back to Web Design / Flash / Graphix

▶ 0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users

  1. Forumul Softpedia
  2. → Professional Zone
  3. → Webmaster Corner
  4. → Web Design / Flash / Graphix
Forumul Softpedia foloseste "cookies" pentru a imbunatati experienta utilizatorilor Accept
Pentru detalii si optiuni legate de cookies si datele personale, consultati Politica de utilizare cookies si Politica de confidentialitate