10 uskomatonta CSS-temppua verkkoasettelujen muuttamiseksi

Jokainen, jolla on kokemusta web-suunnittelusta, oletpa sitten käyttänyt tee-se-itse-sivustojen rakentajia tai luonut sivuston tyhjästä, on todennäköisesti kuullut CSS: stä aiemmin. Tämän uskomattoman tehokkaan työkalun avulla voit muuttaa verkkoasettelujasi, jolloin saat vallan hallita verkkosivustoasi ja saavuttaa luova visiosi. Mutta kuinka voit käyttää peräkkäisiä tyylisivuja seuraavan verkkosivustosi potentiaalin avaamiseen?

Tässä oppaassa käsitellään vain tiettyjä CSS-ominaisuuksia, joita on käytetty yllä olevassa kuvassa näkyvän otsikon luomiseen. Löydät tämän projektin täältä CodePen, antaa sinulle mahdollisuuden kokeilla sitä itse.

CSS-kuvankäsittely

Ensimmäinen askel, joka meidän on otettava otsikkoosion rakentamiseksi, on kuvien lisääminen sivulle. Voit käyttää useita menetelmiä saavuttaaksesi tämän tavoitteen, joten olemme käsitelleet suosituimmat sekä muutaman tempun, jotka auttavat sinua käsittelemään kuviasi.

1. CSS-taustakuva

Haluamme koko näytön taustakuvan otsikkoon, ja taustakuvan CSS-ominaisuus on ihanteellinen. Ensin meidän on luotava säilö kuvallemme (ja muille otsikon elementeille).

Aloitimme lisäämällä div-tunnisteen, jonka luokka on "header", minkä jälkeen asetimme sen korkeus 100vh ja se on leveys 100vw; tämä antaa meille laatikon, joka on täsmälleen samankokoinen kuin kuvaportti. Lisäsimme myös CSS-säännön sivun runkoon sen kanssa ylivuoto asetettu piiloon ja se on marginaalit asetettu arvoon 0px.

Kun säilö on paikallaan, voimme lisätä taustakuvan, ja tämän tavoitteen saavuttamiseksi tarvitsemme kolme erilaista CSS-sääntöä. Ensimmäinen, taustakuva, tarvitsee URL-osoitteen toimiakseen taustakuvan lähteenä, ja olemme käyttäneet tähän kätevää Unsplash-luetteloa. Meidän on myös asetettava taustakoko kanteen ja background-position alas, mutta saatat haluta kokeilla näitä saadaksesi parhaat tulokset.

2. CSS-tausta-sekoitustila

CSS-sekoitustilat mahdollistavat kuvien ja tekstin yhdistämisen, aivan kuten Adobe Photoshopin kaltaisten ohjelmistojen sekoitusominaisuus. Jotta sekoitustilat toimivat taustakuvamme kanssa, asetimme taustaväristä puoliläpinäkyvään valkoiseen ennen kuin lisäsimme sekoitustilan, jota halusimme käyttää.

Tämän jälkeen, background-blend-mode asetettiin pehmeäksi valoksi, jolloin voimme pehmentää kuvaa.

3. CSS-leikepolku

Seuraavaa temppua varten käytämme sääntöä nimeltä clip-path. Kun käytät img HTML -tageja, voit määrittää polun, joka piilottaa osia käsittelemistäsi kuvista. Voit käyttää tähän yleisiä muotoja, mutta voit myös käyttää SVG: tä luovaa sovellusta monimutkaisemman suunnittelun luomiseen.

Lisäsimme div-tunnisteen, jossa on "flex_image_box", joka toimii kolmen kuvan säilönä. Muutimme sen flexboxiksi näyttö-CSS-ominaisuuden avulla (puhumme tästä myöhemmin). Div-tunnisteen sisään lisättiin kolme img-tunnistetta, joiden tunnukset asetettiin "img1", "img2" ja "img3". Asetetaan kunkin kuvan leveys 600 pikseliin, me voimme jätä korkeusominaisuus tyhjäksi muuttamatta kuvien kuvasuhdetta; nyt on aika lisätä klippipolkumme!

Kolmen kolmion luomiseksi käytimme samaa monikulmion leikepolkua img1:lle ja img3:lle ja käänteistä versiota img2:lle. Meidän piti myös leikkiä flex-box-säiliömme sijoittelulla varmistaaksemme, että kuvat ovat oikeassa asennossa näytöllä. Leikepolkusäännömme näkyvät alla.

4. CSS-opasiteetti

Opacity määrittää minkä tahansa HTML-elementin läpinäkyvyyden tason. Asetamme kuviemme peittävyys 90 %, jolloin ne ovat hieman läpinäkymättömiä, jotta ne sulautuvat kauniisti taustaan.

CSS-responsiivinen teksti ja kuvat

Olemme jo tutkineet taidetta luoda upeita responsiivisia verkkosivustoja HTML: n, CSS: n ja JavaScriptin avulla Aiemmin, mutta voimme rakentaa jo ymmärtämillesi periaatteille ja antaa syvemmän käsityksen taidoista, joita tarvitset verkkosivustosi asettelujen hallitsemiseen.

1. CSS: n reagoivat/suhteelliset yksiköt

CSS-yksiköt, kuten px, pt ja cm, ovat absoluuttisia yksiköitä, ja tämä tarkoittaa, että verkkoselain hahmontaa ne samankokoisina niiden käyttämän ikkunan leveydestä ja korkeudesta riippumatta. Suhteelliset yksiköt ovat erilaisia, ja ne tuottavat korkeuksia ja pituuksia, jotka ovat suhteessa muihin mittoihin, kuten selainikkunaan tai pääelementtiin. Alla olevat suhteelliset yksiköt ovat yleisesti käytettyjä ja välttämättömiä responsiiviselle web-suunnittelulle.

• em: Tätä yksikköä käytetään yleensä tekstin kanssa. Se on suhteessa nykyisen elementin fonttikokoon, joten 4em on neljä kertaa niin suuri kuin asetettu fonttikoko.
• rem: Kuten em, rem on suhteessa elementin fontin kokoon; hierarkian juurielementtiä käytetään määrittämään tulosten koko.
• vw/vh: Kun määritetään leveys ja korkeus näkymän koon perusteella, 2vw vastaa 2 % selaimen leveydestä, kun taas 2vh vastaa 2 % selaimen korkeudesta.
• %: %-yksikkö laskee mitat elementin ylätason koon perusteella.
• vmin/vmax: Nämä yksiköt tuottavat mittoja suhteessa 1 %:iin näkymän pienimmistä tai suurimmista mitoista, mikä tarjoaa elementeille keinot reagoida suoraan selainikkunan kokoon.

2. CSS-fonttikoko

Tämä ominaisuus voidaan asettaa oletusarvoilla, jotka on määritetty joko verkkosivuston päätyylitaulukossa tai käyttäjän verkkoselaimessa. Näitä arvoja ovat medium, xx-small, x-small, small, big, x-large ja xx-large, ja medium on asetettu oletusarvoksi tekstille, josta puuttuu fonttikokoinen CSS-tunniste. Vaihtoehtoisesti suhteellisia arvoja voidaan käyttää käytettäessä font-size CSS-ominaisuutta, ja tämä on menetelmä, jota olemme käyttäneet varmistaaksemme, että otsikkoosion teksti on sopivan kokoinen mille tahansa näkymä.

Lisäsimme kaksi otsikkotunnistetta HTML-koodiimme, jotta voimme lisätä tekstiä projektiin. Toinen on suuri pääotsikko, kun taas toinen on alaotsikko, ja ne molemmat käyttävät suhteellisia yksiköitä.

Aiheeseen liittyvä: Kuinka muuttaa HTML-fonttikokoa CSS: ssä

3. CSS: n leveys ja korkeus

Kaikilla HTML-elementeillä on korkeus- ja leveysmitat, olivatpa ne div-, img-, a- tai minkä tahansa muun tyyppisiä tunnisteita. Nämä mitat voidaan asettaa automaattisesti oletusarvoiksi, mutta verkkosuunnittelijat voivat myös sanella ne oikeita sääntöjä käyttäen. olemme käyttäneet molempia menetelmiä tässä otsikossa.

Taustakuvassa on käytetty responsiivisia yksiköitä, joiden korkeudeksi on asetettu 100vh ja leveydeksi 100vw, mutta olemme käyttäneet myös absoluuttisia yksiköitä kolmelle kuvallemme. Kannattaa tutkia ja kokeilla CSS: n leveys- ja korkeusyksiköitä, joissa on vaihtoehtoja, kuten "peri". tarkoittaa pääelementin mittojen omaksumista, ja voit käyttää monia muita tämän kaltaisia ​​temppuja.

4. CSS Mix-Blend-Mode

CSS-sekoitustila on hyvin samanlainen kuin taustasekoitustila, vain sitä voidaan soveltaa mihin tahansa elementtiin sen sijaan, että se olisi tarkoitettu vain taustoille. Olemme käyttäneet tätä ominaisuutta H1-otsikossamme lisätäksemme tekstuuria ja tehdäksemme projektista mielenkiintoisemman. Aloitimme asettamalla omamme tekstin väri mustaksi, jonka jälkeen asetat sekoita-sekoitustila päällekkäin.

Kannattaa tutustua erilaisiin sekoitusvaihtoehtoihin, joita sinulla on tekstin käsittelyssä, sillä taustat, joissa on ainutlaatuiset väriprofiilit, reagoivat eri tavalla käyttämiisi asetuksiin.

5. CSS-tekstinmuunnos

CSS-tekstinmuunnos on näppärä ominaisuus, jonka avulla suunnittelijat voivat muuttaa tekstin kirjainkokoa verkkosivuillaan vaikuttamatta tapaan, jolla hakukoneet sitä lukevat. Esimerkiksi meillä on aseta tekstin muunnos isoiksi kirjaimille H1-otsikossamme, jolloin jokainen kirjain on iso riippumatta siitä, kuinka syötämme sen HTML-koodiimme.

CSS-ylivuodon ominaisuudet

HTML voi usein vaikuttaa jäykältä viitekehykseltä, joka asettaa tiukat rajat verkkosivustojesi sisällölle, mutta näin ei ole, kun käytetään ylivuotoominaisuuksia.

CSS-ylivuoto ja tekstin ylivuoto

Overflow ja text-overflow ovat hyvin samankaltaisia ​​CSS-ominaisuuksia. Ylivuotoa voidaan soveltaa mihin tahansa elementtiin, jolloin voit hallita sisältöä, joka voi paeta rajojaan. Tekstin ylivuoto on samanlainen, vaikka se koskee vain tekstiä, ja antaa sinulle mahdollisuuden lisätä sääntöihisi lisäparametreja. Olemme käyttäneet vain ylivuotoa tässä projektissa (käytimme sitä rajoittamaan sivumme rungon kokoa), mutta voit lukea tekstin ylivuotosta W3Schools verkkosivusto.

CSS: n käyttäminen verkkoasetteluissa

CSS on uskomattoman tehokas työkalu, jonka avulla web-suunnittelijat ja kehittäjät voivat luoda upeita verkkosivustoja koodin avulla. Suosittelemme tutustumaan CodePeniin, jonka toimitimme artikkelin alussa, sillä se antaa sinulle entistä syvemmän käsityksen näiden kaikkien työkalujen toiminnasta. Lisäksi voit pelata tekemällämme otsikolla lisätäksesi oman viimeistelysi.

8 tärkeää CSS-vinkkiä ja temppuja, jotka jokaisen kehittäjän tulisi tietää

Käytätkö näitä keskeisiä CSS-menetelmiä nopeaan työnkulkuun ja kauniiseen verkkosuunnitteluun?

Lue Seuraava

Kirjailijasta