Sisemised varjud css-is. Pildid, tekstid, plokid

Interneti-turundus

Sisukord:

Sisemised varjud css-is. Pildid, tekstid, plokid
Sisemised varjud css-is. Pildid, tekstid, plokid
Anonim

Css-i funktsioonid võimaldavad teil seada elementide sees varje. Plokkide jaoks css-is sisemise varju loomiseks piisab kasti varju reegli määramisest. Keerulisem on olukord tekstile sisemiste varjude seadmisel.

Traditsiooniliselt määratakse varjud elemendi väliskülgedele. CSS-i sisemised varjud on sageli väliste varjude täiendav stiil. Juhtudel, kui on vaja teha taandega teksti efekti või mängida sügavuse ja esiletõstmisega, lisatakse ka sisemised varjud.

Teksti süntaks

CSS-i väliste ja sisemiste varjude loomise põhisüntaks on väga sarnane. Kuna tavaliselt määratakse välised varjud, on sisemiste varjude joonistamiseks vaja täiendavaid samme. Kuid sisemiste varjude seadmiseks peab teil olema hea arusaam väliste varjude toimimisest.

Teksti puhul määratakse välimised varjud tekstivarju abil. Reeglil on neli tähendust:

text-shadow: 0vw 0vw 3vw rgba(134, 250, 252) – juhis määrab varju värvi ja hägususe raadiuse;

välised varjud

text-shadow: 1vw 1vw 3vw rgba(134, 250, 252) – lisab vertikaalse nihke (esimene pilt) jahorisontaalne (teine ​​pilt)

Horisontaalne ja vertikaalne nihe

Plokkide süntaks

Välisvarju saab määrata kastide varjude reegliga. Põhimõte on täpselt sama mis tekstivarjude puhul: mitu väärtust seatakse nihe, raadius ja värv.

  • box-shadow: 0vw 0vw 3vw rgba(134, 250, 252) - juhis määrab hägususe raadiuse ja värvi (esimene pilt); see kasutab sama hägususe raadiust ja värvi nagu tekstinäide;
  • box-shadow: 1vw 1vw 3vw rgba(134, 250, 252) – määrab nihke (teine ​​pilt).
Blokeeri varjud

Teksti- ja kastivarju esimesed kaks väärtust liigutavad varju vastav alt paremale ja alla. Kui määrate need negatiivsetele väärtustele, liigub vari vasakule ja üles:

  1. box-shadow: -1vw 1vw 3vw rgba(134, 250, 252);
  2. box-shadow: -1vw -1vw 3vw rgba(134, 250, 252).
Negatiivsed väärtused

Lisaks plokkide arvestatud väärtustele on määrata veel üks asi – venitus. Vaikimisi venitusväärtus on null. Kui lisate positiivse väärtuse, siis vari venib, negatiivne väärtus tihendab selle:

box-shadow: 1vw 1vw 3vw 2vw rgba(134, 250, 252)

Varju venitus

Varjud ploki sees

Css-i sisemist ploki varju on palju lihtsam luua kui teksti sees. Sisemise kasti varjude puhul muutke lihts alt väliste varjude seadistamisel kehtivat reeglit. Peate kastivarjule lisama sisendi ja vari kaobsees:

box-shadow: inset 1vw 1vw 3vw rgba(134, 250, 252) - vastavatele tahkudele ilmuvad sisemised varjud (pildil on näide välis- ja sisevarjude renderdamise erinevusest);

Varjude renderdamise erinevus

negatiivsete väärtustega saame vastav alt kasti varju: inset -1vw 1vw 3vw rgba(134, 250, 252) ja box-shadow: inset -1vw -1vw 3vw rgba(134, 250, 252)

Negatiivsed väärtused sisestuse jaoks

Varjud teksti sees

Teksti sisemist varju CSS-is ei saa seada tekstivarju reegliga, lisades sisendi. Kui traditsioonilise varju seadistamisel kasutatakse nelja väärtust (horisontaalne nihe, vertikaalnihe, raadius, värv), siis teksti sisemised varjud seatakse läbi ploki, kuhu tekst kuulub.

Enne kui saate tekstile css-is sisemise varju teha, peate sellele looma ümbrise, see võib olla pealkirjasilt. Pealkirjal on must taust. Seejärel määratakse teksti värv läbipaistvaks ja tekst kaob.

Tekstile varjude seadmine

Lisades teksti-varju reegli kaudu läbipaistva värviga tekstile varjud, saame helendava teksti (olenev alt hägususe raadiuse väärtusest võib tekst olla selge) - see on paljas vari, mis jääb tavaliselt taha kirjutatud tekst.


text-shadow: 1vw 1vw 2vw rgba(134, 250, 252);

Ja põhijuhisteks sisemiste tekstivarjude loomiseks on background-clip teksti väärtusega, mis lõikab tausta teksti ääriste külge. Kuna teksti vari on veidi nihutatud, siissaavutatakse sisemiste varjude efekt.


taustaklipp: tekst;
Varjud tähtede sees

Varjud pildi sees

Saate määrata piltidele ka sisemised varjud – määrake plokile taustpilt ja seejärel määrake ploki jaoks sisemised varjud. Saate seda teha ka muul viisil, mähkides pildi lahtrisse, kuid see on aeganõudev ja sellel pole eeliseid.

Hugustuse suure väärtuse määramine võimaldab teil saavutada fotol tugeva vinjeteerimise ilma redigeerijaid kasutamata.

Pildivarjud

Efektid

"Sügavuse efekt" – tänu ainult sisevarjudele saate saavutada tunde, et leht asetub teisele lehele.

Fotode sisevarjud

"Helitugevuse efekt" – sageli luuakse ainult välimisi varje kasutades. Sisemised varjud võimaldavad saavutada suuremat realistlikkust, näiteks saab nende abil luua plokile langeva ebaühtlase valguse efekti või seda täielikult valgustada.

Varjulaadid on loetletud komadega eraldatuna. Ühe külje valgustuse seadistamine toimub sisemiste varjude seadmisega üleval ja vasakul, välisvarjud paremal ja all seavad elemendi varjutatud poole:

  • box-shadow: 0,5vw 0,5vw 1vw 0vw rgba(0, 0, 0, 0,5) – määrab heleda välimise varju vähese hägususe ja vähese nihkega;
  • inset 5vw 5vw 15vw 0vw rgba(255, 255, 255, 0,6) - vastutab ülemise vasaku nurga "valgustuse" eest, mis kehtib ploki kohta; et efekt oleksmärgatavad, hägususe ja nihke väärtused peaksid olema kõigi teiste varjude suhtes suured;
  • inset -1vw -1vw 6vw 0vw rgba(0, 0, 0, 0.2) – määrab sisemise tumeda varju alumisele ja paremale küljele.

Kogu ploki servade hägustamiseks määrake lihts alt kõikide külgede sisemiste varjude väärtused:

  • box-shadow: inset 5vw 5vw 15vw 0vw rgba(255, 255, 255, 0.8) – seab varju üles ja vasakule;
  • inset -5vw -5vw 15vw 0vw rgba(255, 255, 255, 0,8) – määrab täpselt sama varju elemendi paremale ja alumisele küljele.
valgus ja plokk

Järeldused

Sisemised varjud css-is on sama funktsionaalsed kui välimised. Objektidele sisemiste varjude seadmine ei ole väga levinud praktika. Tavaliselt kasutatakse neid koos välimiste varjudega, et luua sügavust või sära.

Varjude kombinatsioon võimaldab teil kujundust mitmekesistada. Sisemised varjud teevad pseudo3D-objektide loomisel suurepärast tööd.

Varjude kombineerimine

Illustreerimiseks kasutatud kood

Enamasti kasutati järgmist html-koodi:


TEKST

Konteineri korpus:


body { polster: 10vw; fondiperekond: Helvetica, Sans-serif; fondi suurus: 8vw; värvus: tume kiltkivihall }

Varjude muutumise illustreerimiseks muudeti kastiploki parameetreid, laiuse, kõrguse, tausta ja teksti joonduse parameetrid plokis jäid muutmata:


.box{ laius: 50vw; kõrgus: 35vw; taustavärv: rgba(136, 134, 252, 0,2); teksti joondus:Keskus; rea kõrgus: 300 pikslit }

Populaarne teema