TechBlogSD - Allt för WordPress- och WEB -utveckling
WEB- och WordPress - instruktioner, nyheter, recensioner av teman och plugins

Hur skapar jag boxskuggor med CSS?

2

CSS "box-shadow" -egenskap låter dig skapa enkla skuggeffekter för elementen på din sida. Du kan använda den här egenskapen för att skapa vackra rutor med skuggaeffekt i topp-, botten-, höger- och vänsterriktning. I den här självstudien kommer vi att använda: före pseudo -element för att skapa olika stilar av skuggeffekt till en textruta.

Relaterat: Hur konverterar jag fantastisk teckensnittsikon till bild?

CSS box-shadow Property Syntax

Syntaxen för box-shadow-egenskapen är enligt nedan:

box-shadow: horizontal offset | vertical offset | blur | spread | color | direction

Nedan är ett exempel när box-skuggan: 10px 10px 10px 10px grön insats; används med ett div -element:

Box Shadow med insats

Det infällda värdet indikerar att skuggriktningen ska vara inuti elementet. Du kan använda början för att skapa skuggaeffekten utanför elementet.

Hur skapar jag skuggaeffekter med CSS?

Låt oss fortsätta skapa en skuggeffekt med hjälp av CSS -pseudo -element. Skapa först en ruta med CSS -koden nedan. Vi lämnar lådan utan att definiera måtten, om du vill, använd specifika höjd- och breddvärden.

.box { background-color:#CDDC39; color: #333333; border-radius: 0px; -moz-border-radius: 0px; -webkit-border-radius: 0px; box-shadow: none; -moz-box-shadow: none; -webkit-box-shadow: none; border: 1px solid #cccccc; margin: 20px; padding: 15px; font-size: 18px; }

Skapa sedan en skugga med nedanstående CSS:

.shadow { position: relative; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .shadow:before { position: absolute; z-index: -1; display: block; background: rgba(0, 0, 0, 0.7); -webkit-box-shadow: 0 0 20px 0px rgba(0, 0, 0, 0.7); -moz-box-shadow: 0 0 20px 0px rgba(0, 0, 0, 0.7); box-shadow: 0 0 20px 0px rgba(0, 0, 0, 0.7); content: ""; }

Vi visar skuggan på vänster sida och justerar positionen med hjälp av nedre och vänstra värden.

.left-shadow:before { bottom: 25px; left: 20px; width: 60%; height: 20px; -webkit-box-shadow: 0 20px 20px 0px rgba(0, 0, 0, 0.7); -moz-box-shadow: 0 20px 20px 0px rgba(0, 0, 0, 0.7); box-shadow: 0 20px 20px 0px rgba(0, 0, 0, 0.7); -webkit-transform: rotate(-3deg); -moz-transform: rotate(-3deg); -ms-transform: rotate(-3deg); -o-transform: rotate(-3deg); transform: rotate(-3deg); }

På samma sätt som vänster skugga, definiera separata stilar för höger, botten och enkel skugga enligt nedan.

.right-shadow:before { right: 20px; bottom: 25px; width: 60%; height: 20px; -webkit-box-shadow: 0 20px 20px 0px rgba(0, 0, 0, 0.7); -moz-box-shadow: 0 20px 20px 0px rgba(0, 0, 0, 0.7); box-shadow: 0 20px 20px 0px rgba(0, 0, 0, 0.7); -webkit-transform: rotate(3deg); -moz-transform: rotate(3deg); -ms-transform: rotate(3deg); -o-transform: rotate(3deg); transform: rotate(3deg); } .bottom-shadow:before { right: 20px; bottom: 0; left: 20px; height: 30px; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; } .simple-shadow:before { right: 20px; bottom: 0; left: 20px; height: 30px; }

HTML för Shadow Effects

För att skapa en skugglåda måste vi använda en av de tre CSS -klasserna ovan med HTML.

  • låda klass
  • skuggklass
  • välj en av skuggstilarna-vänster-skugga, höger-skugga, botten-skugga eller enkel-skugga

Till exempel nedan är HTML -koden för att lägga till vänster skugga till ett div -element:

<div class="box shadow left-shadow"> This is a text box with left shadow. The text inside the box is aligned with "height: 100px; width: 70%; margin: 20px; padding: 15px; font-size: 18px;". The shadow in the left is aligned with "bottom: 25px; left: 20px; width: 60%; height: 20px;". </div>

Demo av CSS Shadow Effects

Du kan justera CSS och skapa rätt skugga, bottenskugga och vanliga skuggaeffekter. Nedan följer några av demos med CSS -skuggeffekter.

Skuggaeffekt på vänster sida

Detta är en textruta med vänster skugga. Texten inuti rutan är i linje med "höjd: 100px; bredd: 70%; marginal: 20px; vaddering: 15px; teckenstorlek: 18px;". Skuggan till vänster är i linje med "botten: 25px; vänster: 20px; bredd: 60%; höjd: 20px;".

Skuggaeffekt på höger sida

Detta är en textruta med rätt skugga. Texten inuti rutan är i linje med "höjd: 100px; bredd: 70%; marginal: 20px; vaddering: 15px; teckenstorlek: 18px;". Skuggan till höger är i linje med "höger: 20px; botten: 25px; bredd: 60%; höjd: 20px;".

Botten CSS Shadow Effect

Detta är en textruta med bottenskugga. Texten inuti rutan är i linje med "höjd: 100px; bredd: 70%; marginal: 20px; vaddering: 15px; teckenstorlek: 18px;". Skuggan i botten är i linje med "höger: 20px; botten: 0; vänster: 20px; höjd: 30px;".

Enkel CSS Shadow Box

Detta är en textruta med enkel skugga. Texten inuti rutan är i linje med "höjd: 100px; bredd: 70%; marginal: 20px; vaddering: 15px; teckenstorlek: 18px;". Skuggan är i linje med "höger: 20px; botten: 0; vänster: 20px; höjd: 30px;".

Inspelningskälla: webnots.com
Leave A Reply

Denna webbplats använder cookies för att förbättra din upplevelse. Vi antar att du är ok med detta, men du kan välja bort det om du vill. Jag accepterar Fler detaljer