Cssing »Archives - az ötlet tolóajtók a css
Blog vebstandartista és vebrazrabotchika Jurij "Akella" Artyukhov.
Valószínűleg az egyik első cikkek CSS, amit készített, hogy „tolóajtók CSS” (második rész) (eredeti). Tetszett, hogy oldja néhány probléma az elrendezés néha szükség van, bár egy kicsit, de szerintem kívül a doboz. Ennek eredményeként ez a gondolat (tolóajtó) többször mentett meg időben. Itt van egy pár alkalmazás, amelynek ön, remélem, hogy egy ötlet, és talán ez segít valakinek. És bár sok ismerős lehet vele, mégis ...
Tolóajtó ukr.net
Egyszer régen a helyszínen ukr.net, akkor is, amikor az első megváltozott (verzió itt) volt sárga területen keresni, azt állítva, a háttérben egy kép - ez egy olyan nagy és így nézett ki:
Később azonban, hogy szükség van egy újratervezése, amely ezen a területen kezd elfoglalni kétharmadát az oszlop. És most ez általában széles középső oszlop - nézd meg magad:
Természetesen, amikor a szag az első változtatni a szélességét túl lusta voltam, hogy dolgozza át a képet a kívánt szélességet. Természetesen akarta, hogy ez a fajta szélességig függetlenül. (Valószínűleg azért, mert tudta, hogy a szélessége is 10-szeres változást). Azért jöttünk, hogy a támogatás „tolóajtó”.
Így a feladat az volt, széles területen egy háttérképet. Hogy nélkül újra rajz képet, hogy a területen már, és azt is kerek élek?
Itt volt egy kódot a HTML (és most is):
Először is határozzuk meg a háttérben (ami jó), a külső díva:
- #searchrow
- magassága: 60 képpont;
- háttér: #fff url (PIC / bg_search.gif) no-repeat 0 100%;
Itt mi lesz:
Terület nem kerek a bal oldalon.
Ezután adjunk hozzá egy másik formája:
- #searchrow forma
- magasság: 60 képpont; / * az azonos magasságban * /
- háttér: átlátszó URL (PIC / bg_search.gif) no-repeat 0 0;
Kapunk ez:
Most két háttérképeket - egyik a másik fölött. Balról bevágja az ajtót:
Ennek eredményeként:
Amire szüksége van. Blokk formák (#searchrow forma) mozgott:
És ha nem tud festeni Photoshop próbálja ábrázolni azt a posztján a blog (ami minden világossá vált), akkor fog megjelenni (egyidejűleg átkozta a kis szélessége a tartalom terület a blog :))
(És itt egy kicsit)
Ha megpróbálja elképzelni, mi ez - mintha mi tolt egy ajtó -, ami miatt nem volt könnyű alacsonyabb háttérrel.
Itt ezen a módon a segítségével ugyanazt a nagy képet kiderült, hogy a sárga terület kerek élek egy tetszőleges egységnyi hosszúságú - korlátozott szélessége természetesen a nagy sárga képeket.
Talán azért, mert a bőbeszédűség (mnogokartinkovosti) szépség ötletek Kenje kicsit -, de nézd meg, vonalak 3-4 SSC mentett meg minket Photoshop megnyitása. Azt hiszem, ez sokat.
Általánosságban elmondható, hogy nyilvánvaló, hogy ez az ötlet prisobachit (mint minden jó ötlet) lehet semmit. Bevágja az ajtót, és függőleges. Itt például azt razvidnul függőlegesen. (Ismét kerek élek, „ajtókat” vannak jelölve piros és zöld)
Érdemes megjegyezni az eredeti cikket Doug Bauman hol tör a navigációhoz. Mert (az ötlet) a kérelem elegendő érezze, hogy ő, vagy ellopják ahogy én hívom. )
De ez nem olyan nehéz, és biztos vagyok benne, hogy sok a sikeresen alkalmazott, de remélem, valaki mindig segít.
Linkek ebben a témában
Én próbálok a lehető legvilágosabban, de itt több információt a témával kapcsolatban:
A növekvő horror font történni :)
A kurzus (több, mint egy évvel ezelőtt, mint egy tördelt ... De ...
Lustaság, oklevél, nyár, menedzsment, amelyre nem prioritás .... így nem azonnal végrehajtható, egy napon minden lesz Elastic;)
PS Én még mindig szégyellem.
ez a technika nem működik túl, ha spórol háttér átláthatóság ...
Ez nem teljesen helyes. Ő csak egy kicsit bonyolultabb.
Egy másik példa a függőleges tolóajtó csak az átlátszó szögek. És amennyire látható, a vétel munkát.
Ha ebben az esetben a kép átlátszó sarkokkal lenne elegendő ahhoz, hogy javítsa a háttér:
- #searchrow forma
- háttér: átlátszó #fff url (PIC / bg_search.gif) no-repeat 0 0;
És lenne minden, ahogy kellene.
Ha volt egyáltalán szükség az áttetsző háttér színátmenet (mellesleg a második példában leírtak szerint FF), akkor meg még pokumekat. De a cél állítottam mutatni egy ötlet, ahelyett, hogy egy szuper sokoldalú megoldás sárga képet mind-mind-mind :)
De nagy, csak annyit, hogy szeretem ezt az elképzelést.
Talán abban az esetben megavazhnoy átláthatósága sárga kép kényelmesebb lenne, mivel ez egy másik módja annak, hogy vágja le. Nincs csodaszer.
Jó ötlet, és nagyon könnyű megérteni akkor ez magyarázza. Én egy volt a ul li paradigma fogságban ez a gondolat :), és most nyilvánvaló dolog világossá vált, mint derült égből a villámcsapás.
És mi a helyzet az átláthatóság, így tudom, hogy miért nem egy univerzális dolog, szükség lesz iepngtransparencyfix.js többet írni :)
És miért nem használja a lekerekített sarkok nélkül képeket?
Lekerekített sarkok nélküli képek - az, hogy van a fejében?
És néhány is ajánlanak egy könyvet css?
Szinte minden könyv jó kezdeni, bár sok információt koncentrálódik, így alistpart.com és számos külföldi bloggerek. Book Zeldman „Designiing Web Standards” (oroszul) nem rossz, a másik kortárs könyvek általában még nem fordították. Könyvek Dena Tsederholma is nagyon hasznos lenne elolvasni.
By the way, az azonos Cederholm könyvében „Bulletproof Web Design” írja le a technikát alkalmazza, hasonló szakaszon boksz függőlegesen és vízszintesen ugyanakkor + és még a betűtípus nincs beállítva a pixel. Itt egy példa, ha érdekel:
konténer float: bal;
color: # 666;
background: url (images / lekerekített right.gif) no-repeat jobb felső;
>
.desc árrés: 0;
padding: 9px 9px 0 9px;
background: url (images / lekerekített left.gif) no-repeat bal felső;
>
.Link margin: 0;
padding: 0 0 0 9px;
background: url (images / lekerekített left.gif) no-repeat bal alsó részen;
>
.Link em display: block;
padding: 0 9px 9px 0;
font-style: normal;
background: url (images / lekerekített right.gif) no-repeat jobb alsó;
>
.konténer egy font-size: 130%;
color: # E70;
>
1.rounded-left.gif 9h200 (sz xh)
2.rounded-right.gif 400 × 200
Nem értettem, miért helyett xhtml kódot benyújtott
Ez a doboz:
Elpusztíthatatlan!
Nos ... tulajdonképpen ez a variáció a négy beágyazott divs sajtolt „sarkok” mindegyikre. Jól és marginalizálódás szöveg benne.
Köszönöm szépen a cikket, minden meg van írva világosan és érthetően! De beosont kérdést: hogyan lehet egy blokk gumi? Például: hogy egy gumi elrendezés, azzal a feltétellel, hogy a sorozat néhány fix szélességű blokkokat, és az utolsó egységet elfoglalják az összes maradék helyet. A szélessége a tartalmat a belsejében nem változik.
Én is nagyon hálás a válasz
Csak azt kell, hogy ugyanazt a képet, de sokkal több, mint amire szükség méretű - az összes többi technikák ugyanazok.