Úryvky kódu 2025, Apríl

"Šité" Pozrite sa - Triky CSS

"Šité" Pozrite sa - Triky CSS

.stitched (padding: 20px; margin: 10px; background: # ff0030; color: #fff; font-size: 21px; font-weight: bold; line-height: 1.3em; border: 2px dashed "

Technika prepísania štýlu Triky CSS

Technika prepísania štýlu Triky CSS

P (font-size: 24px! important;) Pravidlo! important na konci hodnoty prepíše všetky ostatné deklarácie štýlov tohto atribútu, vrátane vložených "

Štýlové odkazy v závislosti od cieľa Triky CSS

Štýlové odkazy v závislosti od cieľa Triky CSS

A (/ * úplne platná adresa URL, pravdepodobne externý odkaz * /) a (/ * odkaz na konkrétny web * /) a, a (/ * interný relatívny odkaz * /) a (/ * e-mailový odkaz * /) a (/ * „

Skladaný papierový efekt Triky CSS

Skladaný papierový efekt Triky CSS

Populárnou dizajnovou technikou je vytvorenie kontajnera obsahu, ktorý vyzerá ako list papiera, a stohovanie ďalších listov papiera pod ním a pridanie vrstvených vrstiev “

Ponuka Spinny Leaf - Triky CSS

Ponuka Spinny Leaf - Triky CSS

Hlavná stránka Katalóg Cena O aplikácii Kontakt nav (šírka: 960 pixelov; výška: 100 pixelov; okraj: 120 pixelov automaticky; zarovnanie textu: stred;). Horná ponuka li (zobrazenie: vložený blok; "

Solarizovaná téma pre CodeMirror a Prettify Triky CSS

Solarizovaná téma pre CodeMirror a Prettify Triky CSS

Tu je služba Google Code Prettify (nachádza sa pri tomto zdroji). .prettyprint (farba: # 839496; farba pozadia: # 002b36;) .prettyprint .pln (farba: inherit;) "

Štandardná výmena obrázkov CSS Triky CSS

Štandardná výmena obrázkov CSS Triky CSS

H1 # logo (šírka: 200px; // šírka obrázka, výška: 100px; // výška pozadia obrázka: url (../ cesta / k / obrázku.jpg.webp); indent-text: -9999px;) táto technika "

Jednoduchý a pekný štýl blockquote Triky CSS

Jednoduchý a pekný štýl blockquote Triky CSS

Blokový citát sa zobrazuje v prehliadačoch vyhovujúcich štandardom s efektom „veľké úvodzovky pred“ a v IE so silným ľavým okrajom a svetlošedou farbou.

Posuvník smajlíkov - Triky CSS

Posuvník smajlíkov - Triky CSS

Vyžaduje sa jQuery a jQuery UI pre skutočný posúvač. Tvár je tvorená prvkami vytvorenými do kruhov s polomerom ohraničenia. Ústa naznačujúca šťastie “

Zasunutie do obrazových polí Triky CSS

Zasunutie do obrazových polí Triky CSS

Z päty dizajnu v8 CSS-Tricks. Zobraziť ukážkovú pätu (jasné: obe; prepad: skryté; veľkosť písma: 16px; výška riadku: 1,3;) # päty-boxy ("

Odstrániť posuvník z Textarea v IE Triky CSS

Odstrániť posuvník z Textarea v IE Triky CSS

Všetky verzie prehliadača IE majú predvolene na textových plochách posúvač, aj keď sú prázdne. Žiadne iné prehľadávače to nerobia, takže ak ich chcete odstrániť, aby ich mohol prehliadač IE „

Signify "PDF Bombs" - Triky CSS

Signify "PDF Bombs" - Triky CSS

Akýkoľvek starý odkaz môže byť odkazom na dokument PDF, ale kliknutie na takýto odkaz, ak si myslíte niečo iné, môže byť pre používateľa prekvapujúce a nepríjemné. Toto “

"Shake" animácia kľúčových snímok CSS - Triky CSS

"Shake" animácia kľúčových snímok CSS - Triky CSS

Toto predpokladá použitie autoprefixeru. .face: hover (animation: shake 0.82s cubic-bezier (.36, .07, .19, .97) both; transform: translate3d (0, 0, 0); "

Zaoblené rohy Triky CSS

Zaoblené rohy Triky CSS

Štandard: -moz-border-radius: 10px; -webkit-border-radius: 10px; polomer okraja: 10px; / * budúca korektúra * / -khtml-border-radius: 10px; / * pre staré "

Mierka pri umiestnení kurzora myši s prechodom Triky CSS

Mierka pri umiestnení kurzora myši s prechodom Triky CSS

Prineste si svoje vlastné predvoľby! .grow (prechod: všetky .2s easy-in-out;) .grow: hover (transformácia: mierka (1.1);) "

Stuha - Triky CSS

Stuha - Triky CSS

Každý miluje stužky

.ribbon (font-size: 16px! important; / * Táto stužka)

Dopyt na médiá sietnice Triky CSS

Dopyt na médiá sietnice Triky CSS

Na zahrnutie grafiky vo vysokom rozlíšení, ale iba pre obrazovky, ktoré ich môžu využiť. „Retina“ je „2x“: @media (-webkit-min-device-pixel-ratio: 2), “

Spracovanie dlhých slov a adries URL (vynútenie zlomov, delenia slov, elipsy atď.) Triky CSS

Spracovanie dlhých slov a adries URL (vynútenie zlomov, delenia slov, elipsy atď.) Triky CSS

Sú chvíle, kedy skutočne dlhý reťazec textu môže pretekať cez kontajner rozloženia. Napríklad: URL zvyčajne neobsahujú medzery, takže „

Reverzný text Triky CSS

Reverzný text Triky CSS

V prípade jazykov sprava doľava môžete vo väčšine prehliadačov zameniť predvolené rozloženie zľava doprava jednoducho pomocou atribútu dir. text sprava doľava “

Odstránenie bodkovaného obrysu Triky CSS

Odstránenie bodkovaného obrysu Triky CSS

A (outline: 0;) Buďte opatrní pri odstraňovaní štýlov obrysov z odkazov, pretože sú funkciou použiteľnosti. Ak tak urobíte, nezabudnite definovať jasné štýly zaostrenia. Ak „

Odstrániť okraje pre prvý / posledný prvok Triky CSS

Odstrániť okraje pre prvý / posledný prvok Triky CSS

Niekedy môže byť žiaduce odstrániť horný alebo ľavý okraj z prvého prvku v kontajneri. Rovnako tak pravý alebo dolný okraj od posledného „

Mediálne dotazy pre štandardné zariadenia Triky CSS

Mediálne dotazy pre štandardné zariadenia Triky CSS

Táto stránka obsahuje zoznam rôznych zariadení a mediálnych dotazov, ktoré by konkrétne zacielili na dané zariadenie. To asi nie je všeobecne dobrá prax, ale je užitočné vedieť, aké sú rozmery všetkých týchto zariadení v kontexte CSS. “

Odstrániť sivé zvýraznenie pri klepnutí na odkazy v mobilnom Safari Triky CSS

Odstrániť sivé zvýraznenie pri klepnutí na odkazy v mobilnom Safari Triky CSS

Webkit-tap-highlight-color: rgba (0,0,0,0); A potom povoliť, aby aktívne štýly fungovali vo vašom CSS na stránke v Mobile Safari: "

Odstrániť hranice bodkovaných odkazov Triky CSS

Odstrániť hranice bodkovaných odkazov Triky CSS

Bodkované okraje okolo odkazov sú funkciou prístupnosti, ktorú má väčšina prehliadačov v predvolenom nastavení. Je to pre používateľov, ktorí musia alebo sa rozhodnú navigovať pomocou klávesnice. “

Odstrániť text tlačidla v IE7 - Triky CSS

Odstrániť text tlačidla v IE7 - Triky CSS

HTML: .. or .. Prejsť CSS: input.button (odsadenie textu: -9000px; text-transformácia: použitie veľkých písmen;) Samotné odsadenie bohužiaľ na odstránenie textu nefunguje. "

Skratky kvality Triky CSS

Skratky kvality Triky CSS

Mierne svetlejšia farba (za predpokladu, že váš text je čierny), bodkované spodné ohraničenie a kurzor otáznika. Toto sa stalo trochu štandardizovaným prístupom, “

Hack / oprava PNG pre IE 6 Triky CSS

Hack / oprava PNG pre IE 6 Triky CSS

Pre obrázky pozadia CSS .yourselector (šírka: 200px; výška: 100px; pozadie: url (/folder/yourimage.png.webp) no-repeat; _background: none; "

Perfektné tlačidlo CSS pre posuvné a posuvné dvere Triky CSS

Perfektné tlačidlo CSS pre posuvné a posuvné dvere Triky CSS

Veľká poznámka tu! Posuvné dvere sú dosť stará technika. Malo to svoj čas na webe, ale dnes to asi nie je najchytřejšia cesta. Máme"

Zabráňte ovplyvneniu horných a dolných indexov Triky CSS

Zabráňte ovplyvneniu horných a dolných indexov Triky CSS

Sup, sub (vertical-align: baseline; position: relative; top: -0,4em;) sub (top: 0,4em;) "

Vytlačiť URL po odkazoch Triky CSS

Vytlačiť URL po odkazoch Triky CSS

@media print (a :: after (content: "(" attr (href) ")";)) "