Jump to content

SUBIECTE NOI
« 1 / 5 »
RSS
Adaptor semnal hi to low

Jocuri Android Multiplayer online...

Diferenta consum smart meter - Co...

Recomandare demontare+instalare ...
 CAIET SERVICE PREDEAL II

Internare spital psihiatrie

CM de snooker 2024

Scot penele dupa montajul tamplar...
 Masina de spalat vase si grasimea

Noua lege de acces in paduri

Sunt ouale proaspete?

Aplicatie invatare limba Germana
 Presbiopia - la 43 ani ?

Termen transcriere autovehicul

Cazare Timisoara pe 4-5 zile

Primele zile ale internetului per...
 

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 cranio-cerebrală minim invazivă Chirurgia cranio-cerebrală minim invazivă

Tehnicile minim invazive impun utilizarea unei tehnologii ultramoderne.

Endoscoapele operatorii de diverse tipuri, microscopul operator dedicat, neuronavigația, neuroelectrofiziologia, tehnicile avansate de anestezie, chirurgia cu pacientul treaz reprezintă armamentarium fără de care neurochirurgia prin "gaura cheii" nu ar fi posibilă. Folosind tehnicile de mai sus, tratăm un spectru larg de patologii cranio-cerebrale.

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