Vlad Merzhevich

MED använder CSS Du kan lägga till en ram till ett element på flera sätt. I grund och botten används naturligtvis gränsegenskapen, som den mest universella, såväl som kontur och, överraskande nog, box-skugga , vars huvuduppgift är att skapa en skugga. Därefter kommer vi att överväga dessa metoder och deras skillnader sinsemellan.

skissera egendom

Den enklaste egenskapen för att skapa ramar. Den har samma parametrar som border , men skiljer sig markant i vissa detaljer:

• kontur visas runt elementet (kanten inuti);
• kontur påverkar inte elementets dimensioner (kanten läggs till elementets bredd och höjd);
• kontur kan bara ställas in runt hela elementet, men inte på enskilda sidor (kanten kan användas för vilken sida som helst eller alla på en gång);
• kontur påverkas inte av den kälradie som anges av egenskapen gränsradie (gränsen påverkas).

Frågan uppstår - i vilka fall behövs disposition, när dess roll, trots de uppräknade skillnaderna, helt övertas av gränsen? Det finns inte många situationer, men de förekommer:

• skapa komplexa flerfärgade ramar;
• lägga till en ram till ett element när du håller musen över det;
• dölja gränsen som webbläsaren automatiskt lägger till i vissa element när den tar emot fokus;
• för outline kan du ställa in avståndet från kanten av elementet till ramen med hjälp av outline-offset-egenskapen för att skapa .

Flerfärgade ramar

Du måste förstå att konturen inte på något sätt ersätter gränsen och lätt kan existera tillsammans med den, som visas i exempel 1.

Exempel 1: Skapa en ram

I i detta exempel en svart ram läggs till runt elementet, som skiljs från bakgrunden med en vit ram (Fig. 1).

Ris. 1. Ram runt elementet

Ram när du använder:hover

När man lägger till en ram via border ökar bredden på elementet, vilket är ganska märkbart när man kombinerar border och :hover-pseudoklassen. Det finns två sätt att "vinna" detta. Det enklaste är att ersätta border med outline , som, som vi vet, inte påverkar storleken på elementet (exempel 2).

Exempel 2: Ram vid hovring

kontur är inte alltid lämplig, om så bara för att runda hörn inte påverkar den. Den andra metoden är lämplig här - lägg till en osynlig ram eller en ram som matchar bakgrundsfärgen och ändra sedan dess parametrar när du svävar (exempel 3). Då kommer ingen förskjutning av elementet att ske, eftersom ramen initialt redan finns. Men vi kommer alltid ihåg att elementets bredd är summan av värdena för bredd , kant till vänster och kant till höger. Situationen är liknande med höjden.

Exempel 3: Ram vid hovring

Kant runt formulärfält

I vissa webbläsare (Chrome, Safari, senaste versionerna Opera) visas en liten ikon runt formulärfälten när de får fokus. färg ram(Fig. 2). För att ta bort det, lägg bara till värdet none till outline-egenskapen i stilarna, som visas i exempel 4.

Ris. 2. Rama in runt marginalerna

Exempel 4. Ta bort ramen

Ramar via box-skugga

Även om egenskapen box-shadow är avsedd att lägga till en skugga runt ett element, kan den också användas för att skapa kanter som inte kan skapas med hjälp av border eller outline . Detta är allt tack vare det faktum att antalet skuggor kan vara obegränsat, vars parametrar är listade separerade med kommatecken.

För att få en ram bör de tre första parametrarna ställas in på noll, de är ansvariga för skuggans position och dess oskärpa. Den fjärde parametern i I detta fallär ansvarig för tjockleken på kanten, och den femte anger färgen på kanten. För den andra ramen är den fjärde parametern lika med summan av tjockleken på de två ramarna.

Exempel 4 visar hur man lägger till två ramar och en kant till höger med en enda box-shadow-egenskap.

Exempel 4: Använda box-shadow

Resultatet av detta exempel visas i fig. 3.

Ris. 3. Ramar skapade av egenskapen box-shadow

I processen med att designa en webbplats undrar många nybörjare webbplatsbyggare hur man ändrar teckensnitt, storlek och färg på rubriker. Ja, det här är verkligen ett bra alternativ som du kan lägga till lite fräschör till din webbdesign. Men det finns en annan lika spännande fråga: hur man gör en html-ram.

Vad är en html-ram för?

Egentligen ingen speciell funktion detta element bär inte. Men ändå väcker texten, innesluten i en snyggt utformad ram, ett visst intresse hos läsarna. Därför kan en ram runt texten med säkerhet kallas ett av sätten att betona vikten av den inramade texten.

Funktioner för att skapa en ram runt text

Naturligtvis variationer i ramdesign använder CSS mycket mer, men det är en helt annan historia. Dessutom detta metoden kommer att fungera för mer avancerade webbplatsbyggare. Jag tror du och jag och med hjälp av redigering html-kod det kommer inte att bli mindre vacker ram html.

I det första skedet måste du förstå att en ram kan göras för alla html-element oavsett vilken typ av tagg det är

,

, , etc.

I sin tur finns det en skillnad mellan ramarna för inline- och blockelement.

Ramen av den inbyggda typen är placerad inuti taggarna, eller mer korrekt, den som är ansvarig för den html display kod mellan vissa taggar. Som ett resultat får vi en html-ram runt texten, som vi måste skriva för vissa kommandon för att ställa in interna marginaler.

Blockramar bildas över hela blockets bredd, vilket framkallar behovet av att specificera kommandon relaterade till att begränsa bredden.

Naturligtvis, för att göra text i en html-ram, måste vi vända oss till de inbyggda stilarna. Den här metoden kommer att vara mest lämpad för att markera vissa enskilda fraser, stycken i text och bilder. Om du behöver markera en specifik del av mallen som visas på alla sidor på webbplatsen är det rimligt att redigera filen style.css för mallen.

Hur man gör en ram runt text i html

Jag tror att det finns mycket teori. Det är dags att träna. Som ett exempel ska jag omsluta i en ljus ljusgrön ram med grå bakgrund ett av de viktiga förslagen i denna artikel.

Viktig poäng! Inbyggda stilar fungerar perfekt och skadar inte webbplatsens HTML-giltighet.

För att implementera samma ram måste du hänvisa till taggen

DITT FÖRSLAG.

Eftersom detta exempel används inbyggd css-stilar, jag anser att det är lika viktigt att presentera dig för var och en av dem.

1. gräns– egendom som ansvarar för att visa ramen. För att förenkla uppgiften angav jag inte varje egenskap separat - kantbredd (tjockleken på ramkanterna), kantfärg (html-ramfärg). Istället kortade jag html-koden lite genom att skriva alla egenskaper efter kolon.

För förändring utseende ram ändra bara värdet fast. Följande ramgränser finns:

Ridge – lättnad.

Prickig - prickig.

Dubbel - dubbel.

Streckad - prickad.

Solid - fast.

2. stoppning– en egenskap som ansvarar för avståndet mellan ramen och föremålet som är inneslutet i den.

Om du vill kan du leka med stilar lite mer genom att lägga till antalet kommandon mellan öppnings- och avslutande taggar

Fast egendom marginal. På så sätt kan du dra in element som ligger utanför ramen.

för att förändras bakgrunden Det räcker med att registrera egenskapen bakgrundsfärg, ange koden för den önskade färgen efter kolon.

Rama runt html bilder Det är gjort på samma sätt, så du borde inte ha några problem med det. Det enda en nybörjare behöver veta är att för att kunna visa det måste egenskaper skrivas i en enda tagg .

För att sammanfatta kan vi säga att för att göra en ram runt en bild eller text räcker det att öppna visningen av html-koden för artikeln och skriva speciella egenskaper i den mellan vissa taggar.

Tack för din uppmärksamhet och vi ses snart på Stimylrosta-sidorna.

Hittade du ett grammatiskt fel i texten? Vänligen rapportera detta till administratören: välj texten och tryck på snabbtangentskombinationen Ctrl+Enter

CSS3 ram kompletterar möjligheten att formatera elementgränser med egenskaper som tillåter runt hörnen element och även använda Bilder att designa elementets kanter.

Rundade hörn och tavelramar

1. Runda hörn med kantradie

Webbläsarstöd

IE: 9.0
Firefox: 4.0
Krom: 4.0
Safari: 5.0, 3.1 -webkit-
Opera: 10.5
iOS Safari: 7.1
Opera Mini: —
Android webbläsare: 4.1
Krom för Android: 44

Egenskapen låter dig runda hörnen på inline- och blockelement. Kurvan för varje vinkel definieras med en eller två radier som definierar dess form − cirkel eller ellips. Radien gäller för hela bakgrunden, även om elementet inte har någon kant, bestäms den exakta positionen för sekanten med hjälp av egenskapen background-clip.

Egenskapen border-radius låter dig runda alla hörn på en gång, och med egenskaperna border-top-left-radius , border-top-right-radius , border-bottom-right-radius , border-bottom-left-radius kan runda varje hörn separat.

Om du anger två värden för gränsradieegenskaper, då avrundas det första värdet övre vänstra Och nedre högra hörnet, och den andra - överst till höger Och nedre vänstra.

Värden specificerade genom/bestämmer horisontell Och vertikala radier. Fastigheten går inte i arv.

alternativ

Div (bredd: 100px; höjd: 100px; kant: 5px fast;).r1 (kantradie: 0 0 20px 20px;).r2 (kantradie: 0 10px 20px;).r3 (kantradie: 10px 20px;). ; ;) .r4 (kantradie: 10px/20px;) .r5 (kantradie: 5px 10px 15px 30px/30px 15px 10px 5px;).r6 (kantradie: 10px 30px .rx4) ( kant-radie: 50%;).r8 (kant-top: ingen; kant-botten: ingen; kant-radie: 30px/90px;).r9 (kant-nedre-vänster-radie: 100px;).r10 ( kant -radie: 0 100%;).r11 (kant-radie: 0 50% 50% 50%;).r12 (kant-översta-vänster-radie: 100% 20px; kant-nedre-höger-radie: 100% 20px ;)
Ris. 1. Exempel olika alternativ runda blockhörn

2. Border-image

Webbläsarstöd

IE: 11.0
Firefox: 15,0, 3,5 -moz-
Krom: 16.0, 7.0 -webkit-
Safari: 6.0, 3.0 -webkit-
Opera: 15,0, 11,0 -o-
iOS Safari: 7.1
Opera Mini: 8 -o-
Android webbläsare: 4.4, 4.1 -webkit-
Chrome för Android: 42

Egenskapen låter dig ställa in en bild som elementets ram. Huvudkravet för bilden är att den ska vara symmetrisk. Egenskapen innehåller följande värden: (border-image: width source segment repeat start;) .

Med hjälp av detta enkel bild Du kan få dessa ramar för ett element.

/* Exempel 1 */ div ( width: 260px; höjd: 100px; border-style: solid; border-image-width: 15px; border-image-source: url(border_round.png); border-image-slice: 30 ; border-image-repeat: stretch; ) /* Exempel 2 */ div ( width: 260px; border-style: solid; border-image-width: 15px; border-image-source: url(border_round. png); border-image-slice: 30 border-image-repeat;
Ris. 2. Ett exempel på att designa blockgränser med hjälp av en bild

Skär A - B - C - D bildar ramens hörn, och den del av bilden som ligger mellan dem fyller det återstående utrymmet av ramen i enlighet med det angivna värdet för egenskapen kant-bild-upprepning. Storleken på hörndelen (i det här exemplet siffran 30) ställs in med värdet för egenskapen border-image-slice.

2.1. kant-bild-bredd

Egenskapen anger bildens bredd för elementets kantlinje. Om bredden inte är angiven, är den som standard 1.

kant-bild-bredd
Värden:
längd	Ställer in kantens bredd i längdenheter - px/em. Du kan ställa in från ett till fyra värden åt gången. Om ett värde anges, är bredden på alla sidor av ramen densamma, två värden anger bredden på den övre och nedre delen och höger-vänster, etc.
siffra	Det numeriska värde som gränsbreddsvärdet multipliceras med.
%	Bredden på elementets kant beräknas i förhållande till bildens storlek. Horisontell i förhållande till bredd, vertikal - i förhållande till höjd.
bil	Motsvarar värdet för kant-bild-segment.
första
ärva

Syntax

Div (kantbildsbredd: 30px;) Fig. 3. Ett exempel på att ställa in bredden på en bildram med hjälp av olika typer värden

2.2. border-image-source

Egenskapen anger sökvägen till bilden som kommer att användas för att dekorera blockets kanter.

Syntax

Div (border-image-source: url(border.png);)

2.3. border-image-slice element

Egenskapen bestämmer storleken på bilddelarna som används för att definiera elementets kanter och delar upp bilden i nio delar: fyra hörn, fyra kanter mellan hörnen och en central del.

Värden:
siffra	Storleken på ramdelarna kan ställas in med ett, två, tre eller fyra värden. Ett värde anger att gränserna ska vara lika stora på varje sida av elementet. Två värden: det första bestämmer storleken på de övre och nedre gränserna, det andra - höger och vänster. Tre värden: det första bestämmer storleken på den övre kanten, det andra - höger och vänster, och det tredje - nedre kant. Fyra värden: Definierar storleken på de övre, högra, nedre och vänstra gränserna. Det numeriska värdet representerar antalet px.
%	Kantstorlekar beräknas i förhållande till bildstorleken. Horisontell i förhållande till bredd, vertikal - i förhållande till höjd.
fylla	Värdet anges tillsammans med ett tal eller en procentsats. Om det anges är bilden inte avskuren av ramens inre kant, utan fyller också området inuti ramen.
första	Ställer in den här egenskapen till dess standardvärde.
ärva	Ärver värdet för den här egenskapen från det överordnade elementet.

Syntax

Div (kant-bild-slice: 50 20;)
Ris. 4. Ett exempel på att specificera bildramskivor

2.4. border-image-repeat

Fastighetskontroller utfyllnad bakgrundsbild mellanrum mellan ramens hörn. Kan specificeras med antingen ett enstaka värde eller ett par värden.

Syntax

Div (kant-bild-upprepning: upprepa;) Fig. 5. Exempel på att upprepa den centrala delen av en bildram med olika typer av värden

2.5. border-image-outset

Egenskapen låter dig flytta bildramen utanför elementets gränser med en angiven längd. Kan specificeras med antingen ett eller fyra värden.

Syntax

Div (kant-bild-start: 10px;)
Ris. 6. Ett exempel på att flytta en bildram med olika typer av värden

3. Yttre ramförskjutning konturförskjutning

Egenskapen anger avståndet mellan gränsen gränselement och en yttre kant skapad med hjälp av outline-egenskapen.

/*Figur 1:*/ img ( kantlinje: 1px fast rosa; kontur: 1px streckad grå; konturförskjutning: 3px; ) /*Figur 2:*/ img ( kant-bredd: 1px 10px; kant-stil: fast; kantfärg: rosa kontur: 1px streckad grått;
Ris. 7. Ett exempel på att dekorera en bild med en yttre ram

4. Gradientram

Värdet på kantbild kan inte bara vara en bild utan också en gradientfyllning.

Genomskinlig ram

En av färgerna är transparent. På detta sätt kan du sätta gränser för alla sidor av ett element samtidigt eller separat för varje sida. Gränsens tjocklek styrs av egenskapen gränsbredd.

* (box-sizing:border-box;).wrap (höjd: 200px; stoppning: 25px; bakgrund: #00E4F6; ) .gradient (höjd: 150px; bredd: 50%; marginal: 0 auto; kant: 10px solid transparent ; border-image: linear-gradient (till höger, transparent 0%, #ADF2F7 100%);

Postkuvert

* (box-sizing:border-box;).wrap (höjd: 200px; utfyllnad: 25px; ) .gradient (höjd: 150px; bredd: 50%; marginal: 0 auto; kant: 10px solid transparent; kantbild: 10 repeterande linjär gradient (45 grader, #A7CECC, #A7CECC 10px, transparent 10px, transparent 20px, #F8463F 20px, #F8463F 30px, transparent 30px, transparent 40px)

Den här egenskapen skapar en kant runt ett element. Du kan läsa mer om denna fastighet på länken, och i denna artikel I översikt Jag ska beskriva hur det fungerar. Denna information kommer att räcka för att förstå hur man gör ramar med CSS.

Syntaxen för border-egenskapen är enkel: border: 1px solid black; . Denna egenskap har tre betydelser:

• 1px - kanttjocklek.
• heldragen - ramtyp, heldragen är en heldragen linje, dubbel är en dubbel heldragen linje, streckad är en prickad linje. Det finns flera andra typer av gränser, information om dem finns här: CSS-gräns.
• svart - ställer in kantfärgen. Färger kan anges med namn, giltiga värden finns här: CSS-färgtabell, eller med hexadecimal kod. Hur man gör detta beskrivs i artikeln: färger i CSS.

CSS textram

Här är ett exempel på hur man använder border-egenskapen för att skapa en kant som är en pixel bred och svart:

Detta stycke tilldelas klassen exempel-1.

I det här exemplet använde vi även egenskapen CSS stoppning, eller stoppning. Den här egenskapen anger mängden indrag från texten till strecket (elementets kant).

Låt oss titta på ett annat enkelt exempel, bara för att få fram poängen. Låt oss skapa en ram med tre pixlar bred, röd och utan stoppning ( CSS-egenskap stoppning).

Detta stycke tilldelas klassen exempel-2.

Som vi kan se, utan stoppningen, ser textramen hornig ut.

Hur man gör en bildram i CSS

Ramar för bilder ställs in på liknande sätt med hjälp av kantegenskapen. Låt oss göra en ram Grön färg 4 pixlar tjock för bilden.

Exempel-img (kant: 4px fast grön;)

Så här kommer den här koden att fungera:

Hur man rundar hörnen på en ram i CSS

Avrundning av en kants hörn i CSS görs med egenskapen border-radius. Den här egenskapen introducerades i CSS3 och fungerar i alla moderna webbläsare.

Egenskapen border-radius kan ha från ett till fyra värden. Om det finns ett värde, ställer det in graden av avrundning för alla hörn. Låt oss ge ett exempel på hur den här egenskapen kommer att fungera med ett värde.

Exempel-3 (kant: 1px helt svart; kantradie: 15px; utfyllnad: 10px; )

Så här fungerar det:

border-radius-egenskap: 15px.>

Om blocket inte har en kant, så finns det en kantbredd: 0; , då kommer det ifyllda området att avrundas bakgrundsfärg(bakgrundsfärgsegenskap). Här är ett exempel:

Exempel-4 ( border-width: 0; // även om detta värde är 0 som standard bakgrundsfärg: #DDD; border-radius: 15px; utfyllnad: 10px; )

Så här fungerar det här exemplet:

border-radius-egenskap: 15px.>

Som jag skrev tidigare kan egenskapen border-radius ställas in från ett till fyra värden. Tabellen nedan beskriver hur varje kombination av värden kommer att fungera.

För egenskapen border-radius kan värden anges i procent.

Låt oss rita en cirkel i CSS. För att göra detta, ta ett kvadratiskt block på 100 gånger 100 pixlar och runda det CSS hörn border-radius: 50 % regel.

Exempel-5 ( bredd: 100px; höjd: 100px; bakgrundsfärg: #F00; kantradie: 50 %; )

Så här fungerar det här exemplet:

Detta täcker ämnet "ramar i CSS" helt och hållet. Lycka till med att lära dig CSS!

Hej kära vänner och blogggäster! Idag fortsätter vi att bekanta oss med elementen i webbplatsbyggande och låt oss lära oss hur man skapar css-ramverk. I min senaste artikel berättade jag och visade hur de skapas, men css ramverk se vackrare och attraktivare ut. Därför kommer alla som har lärt sig att göra html-ramar kunna skapa en css-ram. Och jag ska hjälpa dig med detta! Låt oss börja...

Hur gör man själv css-ramar för en webbplats?

Som jag redan berättat ovan är css-ramverk mycket vackrare och mer praktiska än html-ramverk och det kommer inte att vara svårt för dig att skapa sådana css-ramverk själv om du redan har lärt dig hur man gör html-ramverk.

Vad behöver vi för att göra css-ramverket? Inget för upprörande! Din önskan och min artikel, där jag kommer att förklara allt för dig i detalj.

Här är dess kod:

Våra css-ramar!

Här är det andra css-ramexemplet:

Här är dess kod:

Våra css-ramar!

Här är ett tredje exempel på en prickad ram:

Det här är hennes kod:

Våra css-ramar!

Detta är det fjärde exemplet på en dubbelkonturram:

Det här är hennes kod:

Våra css-ramar!

Och om du applicerar värdet "ås" så är det här ramen du får:

Här är dess kod:

Våra css-ramar!

Låt oss nu göra de rundade kanterna på vår css-ram med hjälp av dessa värden för "kant-radie" och "box-skugga":

Här är ramen med runda kanter och dess kod:

Våra css-ramar!

Låt oss nu göra en ram med suddiga kanter, detta ser också ganska attraktivt ut och är lätt att göra, ändra bara siffran i "box-shadow"-värdet till ett högre värde. Och detta är vad som händer:

Här är dess kod:

Våra css-ramar!

Nu ska vi göra en ram med flerfärgade konturer, lägg bara till flera färgscheman till värdet "box-shadow":

Här är dess kod:

Våra css-ramar!

Och nu är höjdpunkten för våra css-ramar rund ram. Detta kan också göras helt enkelt genom att ändra värdet för "gränsradie". Titta här:

Här är koden här:

Våra css-ramar!

Det var allt för idag. Vi ses!

Om du gillade materialet, gör följande...

1. Vänligen gilla det.

1. Retweet.

1. Dela detta inlägg med dina vänner på sociala nätverk.

Tack för din uppmärksamhet!