Forráskód elemzés
Egy weboldal sokszor elég összetett, főképp ha nem magunk készítettük, nem mindig tudjuk, hogy egy-egy elemre hogyan lehetne hivatkozni, hogy változtathassunk rajta. Sokan nem tudnak az oldal forráskódjával mit kezdeni, annak ellenére, hogy a böngészőben ott van erre a remek funkció.
Évek óta ott van a Chrome-ban pl. az Inspect funkciója, de a Mozilla is rendelkezik vele, és szerintem talán már az IE is. (bevallom ennek nem néztem utána). Az inspect-tel megnézhetjük egy adott elem helyzetét a forráskódban. Hatékonyan kereshetünk benne, illetve azt is megnézhetjük, hogy milyen CSS tulajdonságokkal rendelkezik egy adott elem.
CSS tipp: Oldalsávok egymás mellett
Sajnos az utóbbi két hétben nem nagyon tudtam az oldallal foglalkozni, mivel rengeteg zh volt, nagyon sokat kellett tanulnom. Kedden kezdődik a vizsgaidőszak, és két vizsgám már lesz is a héten, úgyhogy sok frissítés továbbra sem lesz, de ha végre lement ez az egész, akkor belehúzok :)
Most egy kis trükköt hoztam, amivel a két oldalsáv egymás mellé helyezhető. Ez igazából egyszerű css kóddal megoldható, csak float-ot kell beállítani a hasáboknak.
.sitemain .sitecol:first-child, .sitecol:nth-child(3){
float: left;
}
.sitemain .sitecol:nth-child(2){
float: right;
}
Ez a két oldalsávot balra, míg a középsőmodult jobbra állítja. Természetesen az értékek felcserélhetők.
2016.05.14. 23:03, nikkii |
Live CSS váltó
Most egy olyan kódot hoztam nektek, amellyel egy 'CSS váltót' készíthettek. CSS kódokkal foglalkozó oldalakra szuper, hiszen enélkül nem nézhető át a teljes oldal élőben, hogy hogy is fog kinézni. Igy viszont nem kell többé próbamodulokkal, esetleg próbaoldalakkal küzedeni, egyetlen kattintásra megváltoztatható az oldal kinézete.
Aki ki szeretné próbálni, az itt megteheti: CSS váltó demó (A példa css kódokért köszönet Efruse-nak)
A kód a bővebben rész után található.
2016.03.28. 15:20, nikkii |
|