Hálózatok‎ > ‎

CSS példák

Ezen az oldalon olyan példákat gyűjtünk össze, amelyek weboldalak alapvető funkcióinak megvalósítására használhatók.

Animált kép, mint hivatkozás

A navigációt gyakran úgy tesszük csinosabbá, hogy a menüpontok képek. Segít a tájékozódásban, ha az egérmutató alatti menüpont (kép) picit megváltozik, így kiemelkedik az éppen kiválasztásra kerülő opció. A példa azt feltételezi, hogy a menüpontot szimbolizáló kép 100 pixel széles és 30 pixel magas.

HTML

<a id="menu1" href="...1. menüponthoz tartozó url..."></a>

CSS

a#menu1{
    display: block;
    width: 100px;
    height: 30px;
    background-image: url(amikor-nincs-kiválasztva.png);
}

a#menu1:hover {
    background-image: url(amikor-ki-van-választva.png);
}

Képfelirat függöny-effektussal

Egy kép magyarázata elhelyezhető egy olyan "rétegen", amely csak akkor jelenik meg (kitakarva a képet), ha az egérmutatóval fölé megyünk. Szokás függöny-effektusnak nevezni az ilyen animációkat (curtain-effect).

HTML

<div class="doboz">
<div class="cont">
<div class="fuggony">
<h1>A macska</h1>
<p>
A macska egy kisebb termetű húsevő emlősállat, 
amely a macskafélék családján belül a <i>Felis</i> nem 
<i>Felis silvestris</i> fajához tartozik.
</p>
</div>
</div>
</div>

CSS

DIV.doboz {
width:300px;
height:300px;
padding:0px;
border:solid 1px;
margin:40px;
overflow:hidden;
background-image: url(cica.jpg);
}

DIV.cont {
position: relative;
width:300px;
height:600px;
padding:0px;
margin: 0px;
overflow:hidden;
}

DIV.fuggony {
color: white;
overflow:hidden;
position: absolute;
transition: all 0.5s;
-webkit-transition: all 0.5s;
background-color:rgba(100,100,100,0.7);
width:280px;
height:580px;
padding:10px;
margin: 0px;
margin-top:210px;
}
DIV.fuggony:hover {
overflow:hidden;
transition: all 0.5s;
-webkit-transition: all 0.5s;
padding: 10px;
margin-top:0px;
}
H1 {
padding:0px;
font-family: Arial;
}

Kép


Menü, listából

Egy számozatlan listát (vízszintes) menüvé alakíthatunk.

HTML


<div id="menu">
<ul id="menu">
<li><a href="http://www.szepmuveszeti.hu">Szépművészeti múzeum</a></li>
<li><a href="http://www.trafo.hu">Trafó</a></li>
<li><a href="http://mupa.hu">Művészetek Palotája</a></li>
</ul>
</div>

CSS


DIV#menu {
  background-color: #010326;
  width: 600px;
  height: 30px;
  margin: 0px 0px 10px 0px;
  padding: 0px 0px 0px 0px;
  border: 0px;
  overflow: hidden;
  font-family: sans-serif;
}

#menu ul#menu {
  margin: 0px 0px 0px 0px;
  padding: 0px;
  height:100%;
  float:left;
  height:30px;
  overflow:hidden;
  list-style-type: none;
}

#menu ul#menu li {
  margin: 0px;
  padding: 0px;
  float:left;
  height:100%; 
}

#menu ul#menu li a {
  float:left;
  font-size:14pt;
  font-weight: bold;
  text-decoration: none;
  height:100%;
  padding:0 15px;
  margin: 0px;
  line-height:30px;
  color: white;
}

#menu ul#menu li a:hover {
  background:url(menuhover.gif) top left repeat-x;
  text-decoration:none;
}

Kép



Külső CSS váltása javascript segítségével




<html> 
<head> 
    <title>Changing CSS extern file using only JavaScript</title> 

    <link rel="stylesheet" type="text/css" href="positive.css"/> 

    <script type="text/javascript"> 
        function changeCSS(cssFile, cssLinkIndex) { 

         var oldlink = document.getElementsByTagName("link").item(cssLinkIndex); 
         var newlink = document.createElement("link");

         newlink.setAttribute("rel", "stylesheet"); 
         newlink.setAttribute("type", "text/css"); 
         newlink.setAttribute("href", cssFile); 

         document.getElementsByTagName("head").item(0).replaceChild(newlink, oldlink); 

        } 
    </script> 
</head> 

<body> 
    <a href="#" onclick="changeCSS('positive.css', 0);">STYLE 1</a> 
    <a href="#" onclick="changeCSS('negative.css', 0);">STYLE 2</a> 

    <div class="box">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</div> 
</body> 
</html>

Animációk a Canvas elem felhasználásával (CSS+HTML5+javascript)

Reszponzív oldalak