Jump to content

SUBIECTE NOI
« 1 / 5 »
RSS
Antena satelit DIGi prin fibra op...

Recomandare imprimanta

Masina spalat indesit wisl 85 nu ...

Modificare frecventa rami ddr4
 Ramon(2023)

Probleme internet (ping,packetloss)

Adictia la medicamente opioide.

reziliere contract
 E normal sa aiba viteza mai mica ...

Kaufland - Pareri / Sugestii / Re...

Ce fel de calorifere/radiatoare s...

Ce inseamna C.I+?
 O luna de permis si un Ford Monde...

Problema baterie opel astra h

Prioripost

ce puteam face in aceasta situatie?
 

Menu cu gradient css3-nu merge tranzitia

- - - - -
  • Please log in to reply
No replies to this topic

#1
cristirg

cristirg

    Senior Member

  • Grup: Senior Members
  • Posts: 7,684
  • Î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 spinală minim invazivă Chirurgia spinală minim invazivă

Chirurgia spinală minim invazivă oferă pacienților oportunitatea unui tratament eficient, permițându-le o recuperare ultra rapidă și nu în ultimul rând minimizând leziunile induse chirurgical.

Echipa noastră utilizează un spectru larg de tehnici minim invazive, din care enumerăm câteva: endoscopia cu variantele ei (transnazală, transtoracică, transmusculară, etc), microscopul operator, abordurile trans tubulare și nu în ultimul rând infiltrațiile la toate nivelurile coloanei vertebrale.

www.neurohope.ro

0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users

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