z-index-et állíts be a menüre, és arra is ami most fölé kerül. Értelemszerűen a menün legyen a magasabb érték.
Bevezetés a CSS3 animáció világába. Micsoda megváltás lesz, ha mindenki HTML5 + CSS3 támogató böngészőt fog végre használni 🙂
A lenti forráskód néhány helyen eltér attól amit a videóban írtam. Utólag vettem észre, hogy néhány helyen lehet még rajta tömöríteni.
A működő kódot ide kattintva tudod megnézni.
<html>
<head>
<meta charset="utf-8"/>
<title>CSS transition</title>
<link rel="stylesheet" href="style.css"/>
</head>
<body>
<section id="wrapper">
<h1>CSS3 transition</h1>
<div class="box effect-1">
<img src="1.png" alt=""/>
<div>elso</div>
</div>
<div class="box effect-2">
<img src="2.png" alt=""/>
<div>masodik</div>
</div>
<div class="box effect-3">
<img src="3.png" alt=""/>
<div>harmadik</div>
</div>
<div class="box effect-4">
<img src="4.png" alt=""/>
<div>negyedik</div>
</div>
</section>
</body>
</html>
* { margin: 0; padding: 0; border: 0 }
body {
font: 18px 'Lucida Sans Unicode';
color: #fff;
background: #f6f6f6;
background: linear-gradient(to bottom, #f5f6f6 0%,#c4c4c4 100%) fixed
}
section#wrapper {
width: 1000px;
margin: 100px auto 0 auto;
}
h1 {
font-size: 50px;
color: #707070;
text-align: center
}
div.box {
width: 200px;
height: 200px;
float: left;
margin: 50px 20px 0 20px;
border: 5px solid #fff;
border-radius: 105px;
overflow: hidden;
box-shadow: 10px 10px 20px rgba(0,0,0,0.2);
position: relative
}
div.box img { border-radius: 100px }
div.box div {
width: 200px;
height: 105px;
background: #000;
text-align: center;
border-radius: 100px;
padding: 95px 0 0 0
}
div.effect-1 div {
position: absolute;
top: 0;
left: 0;
opacity: 0;
transition: opacity 500ms;
}
div.effect-1 div:hover { opacity: 0.8 }
div.effect-2 img {
position: absolute;
top: 0;
left: 0;
transition: margin-left 800ms
}
div.effect-2:hover img { margin-left: 200px }
div.effect-3 div {
position: absolute;
opacity: .8;
top: 0;
left: 0;
margin-left: -200px;
transition: margin-left 500ms
}
div.effect-3:hover div { margin-left: 0 }
div.effect-4 img {
position: absolute;
top: 0;
left: 0
}
div.effect-4 div {
opacity: .8;
transform: scale(0);
transition-duration: 500ms;
-webkit-transform: scale(0)
}
div.effect-4:hover div {
transform: scale(1);
-webkit-transform: scale(1)
}
Szia,
Rengeteget tanultam a videóidból, köszönöm.
Az volna a kérdésem, hogy CSS3-al azok az effektek is megoldhatóak, mint amilyet néhány oldalon látok, miszerint a tmbnail-re víve az egeret, maga a kép mérete változik, vagy forog, vagy az egeret mozgatva ide-oda billeg, vagy ehhez js, vagy vmi más kell?
Próbáltam a div-et egy A tag-be tenni, de az xhtml nem engedi…
Ha a képet linkelem, akkor a fölötte lévő “első” div miatt nem látható a link 🙁
Van erre vmi megoldás?
Az onclick=”javascript:window.location.href=’xxxxxxxxxxxxx'” -et találtam erre… vagy az nem vmi okos megoldás?
hello, I from BRAZIL.
I loved your slide.
I have a doubt;
how do I decrease the size of the background.
Luciano Cipriano
Brazil
Azt hogyan lehet megoldani, hogy ha rákattintok megnyíljon egy oldal?
Szia, az normális működés, hogyha egy 2px szegélyű div-re positionnal “ráhúzom” a benne lévő másik, szintén 2px szegélyű div-et, akkor a felül lévő div a szegély szélességével jobbra és lefelé elcsúszva jelenik meg? Vagy én toltam el valamit? Jó megoldás erre a -2px-es top és left beállítás?
Köszi a videót!
És azt szeretném kérdezni hogy a less cssről is készítesz majd videót?
Nem semmi. Köszönöm, hogy megosztottad. Remélem ha az időd engedi lesz még mit tanulni tőled. 🙂
Időközben azt sikerült megoldanom. Nagyon jó, köszi szépen a tutorialt.
Helló szeretném kérdezni hogy azt meglehet csinálni hogy ezek a képek linkeljenek?
Remek videó!
Csodálatosan néz ki! 😉
z-index-et állíts be a menüre, és arra is ami most fölé kerül. Értelemszerűen a menün legyen a magasabb érték....
Kedves Tamás! Remélem még aktív a blog és tudsz nekem segíteni. Nagyon tetszett a videód, ki is próbáltam. A videód alapján beépitettem ezeket az ...
Egy fázis jön be három vezetéken keresztül. Az óránál egy darab megszakító van csak. Ezért kérdeztem, hogy milyen fi relét javasoltok?...
Ez nem igaz, mert az óránál ott a 3 biztosító darabja 20 A...
Olyasmit találtam hogy a szöveg részt 2 részre osztjuk bal és jobb......
Itt a működő kód, innen másold ki: https://cyrex.hu/uploads/2014/08/responsive-menu/...
Szia. A kódok alapján, meg persze a videót végignézve megcsináltam a menüt. Sajnos nem úgy működik, ahogy kellene. A menü3 almenüi nem gördülnek le, ...
Szerintem azt sehogy....
Panelban ugyan az a három fázis jön be három MCU-n és nem 3fázis... Keresztmetszet növelés miatt csinálták anno......
Szia Jó lett a videó. De mi van akkor ha a képet a szöveg közepére szeretném tenni, és azt akarom hogy így fusson körbe a szöveg....
Jó lett :) Már kezdtem aggódni hogy eltűntél vagy valami hogy ilyen sokáig nem volt videó. 2 naponta néztem az oldaladat hogy hátha.... :)...
Ha három fázisod van, akkor három fázisú Fi relét kell venni....
Kedves Tamás!
Remélem még aktív a blog és tudsz nekem segíteni.
Nagyon tetszett a videód, ki is próbáltam.
A videód alapján beépitettem ezeket az effekteket, felül elhelyezkedik egy fix menüsor… ami viszont görgetéskor a körök mögé kerül, mikor azok a menühöz érkeznek.
valami a pozionálással nem stimmel, de ha az egyik jó , akkor kiesik egy másik funkció.
Van ötleted?
Nagyon köszönöm előre is!