ingångEffekten av krökta hörn med användning av endast CSS. Skapa en CSS-ramkommentarer Ram med CSS-hörnet
Vlad Merzehevich
Med hjälp av CSS kan du lägga till en ram på elementet på flera sätt. I grund och botten tillämpas naturligtvis gränsen egendom som den mest mångsidiga, liksom konturen och, oavsett hur överraskande, boxskugga, vars huvudsakliga uppgift är att skapa en skugga. Tänk på dessa metoder och deras skillnader mellan sig själva.
Outline egendom
Den enklaste egendomen för att skapa en ram. Den har samma parametrar som gräns, men skiljer sig avsevärt från det med några detaljer:
- Översikt visas runt elementet (gränsen inuti);
- Översikt påverkar inte elementets storlek (gränsen läggs till i elementets bredd och höjd);
- Översikt kan endast installeras runt elementet helt, men inte på separata sidor (gränsen kan användas för någon sida eller på en gång);
- på konturer tillämpar inte Radien av den rounder som anges av Border-Radius-egendomen (på gränsen).
Frågan uppstår - i vilka fall behöver skissera, när hans roll, trots de angivna skillnaderna, fullt ut tas av gränsen? Situationer är inte så mycket, men de möts:
- skapa komplexa färgglada ramar;
- lägga till en ram till ett element när du svävar muspekaren;
- gömmer den ram som adderas av webbläsaren automatiskt för vissa föremål när du tar emot fokus;
- för konturer kan du ställa avståndet från kanten på elementet till ramen med hjälp av egenskapen Outline-offset, för att skapa.
Flerfärgade ramar
Det bör förstås att konturen inte på något sätt ersätter gränsen och kan finnas med det, som visas i exempel 1.
Exempel 1. Skapa en ram
I det här exemplet läggs en svart ram runt elementet, som är separerat från den vita gränsbakgrunden (fig 1).
Fikon. 1. Ram runt elementet
Ram när du använder: Hover
När du lägger till en ram via gränsen ökar en ökning av elementets bredd, vilket är ganska märkbart när man kombinerar gräns och pseudoklass: svävar. Det finns två sätt att "vinna". Det enklaste är att ersätta gränsen på konturen, som vi vet, inte påverkar elementets storlek (exempel 2).
Exempel 2. Ram när man svävar
Översikt är inte alltid lämplig, om det bara är att det inte fungerar avrundning av hörnen. Här är den andra metoden lämplig - lägg till en osynlig ram eller en ram som sammanfaller med bakgrundsfärgen och ändrar sedan dess parametrar när de svävar (exempel 3). Då kommer ingen förskjutning av elementet inte att hända, eftersom ramen är ursprungligen redan där. Men kom alltid ihåg att elementets bredd konsumeras från värdena på bredden, gränsen till vänster och kant till höger. På samma sätt, med en höjd.
Exempel 3. Ram när man svävar
Ram runt fältfält
I vissa webbläsare (Chrome, Safari, senaste versionerna Opera) runt fälten i formuläret vid mottagandet av fokus, visas en liten färgram (bild 2). För att ta bort det är det tillräckligt att lägga till värdet av ingen till skissegenskapen, som visas i exempel 4.
Fikon. 2. Ram runt fälten
Exempel 4. Ta bort ramen
Ramar genom boxskugga
Även om box-shadow-egenskapen är utformad för att lägga till en nyans runt elementet, kan du också skapa en ram med den, och så att det inte kan göras via gräns eller kontur. Allt på grund av det faktum att antalet skuggor kan vara obegränsade, vars parametrar är listade via kommatecken.
För att få ramen bör de tre första parametrarna ställas in på noll, de är ansvariga för skuggans position och dess suddighet. Den fjärde parametern i detta fall är ansvarig för gränsens tjocklek, och den femte sätter ramens färg. För den andra ramen är den fjärde parametern lika med summan av tjockleken på de två ramarna.
I exempel 4 visas tillsatsen av två ramar och en kant till höger med hjälp av en box-Shadow-egenskap.
Exempel 4. Använda Box-Shadow
Resultatet av detta exempel visas i fig. 3.
Fikon. 3. Framar skapade av box-shadow egendom
I den här lektionen skapar vi effekten av de krökta hörnen utan användning av bilder och ytterligare märkning. Det fungerar bra i alla moderna webbläsare och är väl lämpad för platsdesign med enkla färglösningar.
Denna effekt användes för att demonstrera lektionen "flera bakgrunder och stroke med CSS2". Dessutom kan användningen av krökta hörn i utformningen av den verkliga webbplatsen ses av exemplet av Yiibu. Men Yiibu-webbplatsen använder bilder, och vi använder pseudo-element och CSS.
Start
Inget svårt. Eventuellt element är lämpligt och ingen ytterligare markering kommer att krävas. Allt börjar med en enkel målad rektangel. Webbläsare som inte stöder pseudo-element (IE6 och IE7) kommer också att dra tillbaka det.
Lägga till position: Relativ egendom gör det möjligt att absolut positionering av pseudo-element.
Anm. (Position: Relativ Bredd: 30%; Padding: 1EM 1.5EM; marginal: 2em Auto; Färg: #fff; Bakgrund: # 97c02f;)
Spolhörnet skapas med ett pseudo-element, som är placerat i det övre hörnet av rektangeln. Pseudo-elementet har ingen bredd och höjd, men det ges en tjock stroke. Genom att ändra slagtjockleken ändrar vi storleken på det krökta hörnet.
I det här exemplet har de övre och högra delarna av stroke färger som motsvarar färgen på bakgrunden av moderrektangeln. Vänster och nedre delarna av stroke har en mörkare färg eller ljusare jämfört med färgen på rektangelbakgrunden.
Obs! Före: Absolut; Topp: 0; höger: 0; Bredd-Bredd: 0 16px 16px 0; Border-Style: Solid; Border-Färg: # 658e15 #ff;)
Det här är allt du behöver för att skapa en enkel effekt av ett krökt hörn som liknar Yiibu-webbplatsen.
Firefox 3.0 tillåter inte positionering av pseudo-element. Du kan använda ett par egenskaper för att korrigera positionen i den här webbläsaren.
Obs! Innan (... Visa: Blockera; Bredd: 0;)
Lägg till en ljusskugga
Utsikten över hörnet kan förbättras något genom att lägga till fastigheten i Box-Shadow (för de webbläsare som stöder det) till pseudo-elementet. Ställa in överflödet: dold egendom för elementklassen döljer en del av skuggan som stör effekten av det krökta hörnet.
Obs! Innan (... -WebKit-Box-Shadow: 0 1px 1px rgba (0,0,0,0,3), -1px 1px 1px rgba (0,0,0,0,0); -moz-box- Shadow: 0 1px 1px rgba (0,0,0,0,3,3), -1px 1px 1px rgba (0,0,0,0,0,2); Box-Shadow: 0 1px 1px rgba (0,0, 0,0,3,3), -1px 1px 1px RGBA (0,0,0,0,2);)
Rundade hörn
Också relativt bara använda denna teknik tillsammans med rundade hörn. Tyvärr har varje modern webbläsare något fel i samband med Border Radius-egenskapen (inklusive de som använder egendomen utan prefix). Denna bestämmelse innebär att behovet av att utföra ytterligare arbete.
Endast WebKit-webbläsare kan göra avrundade hörn för pseudo-element, om de bara har 2 delar av stroke. Opera 11 och Firefox 3.6 Skapa en gäng obehaglig. Dessutom har Opera 11 ett maximalt fel i denna process.
Användningen av alla fyra sidor eliminerar problemen i Opera 11 och Firefox 3.6. Men den här metoden Lösningar leder till ett fel i Safari 5, vilket uttrycks vid återkallandet av den diagonala linjen med tänderna. Gå förbi det här problemet Du kan ställa in färgen för minst en del av stroke som transparent.
Bakgrundsfärgen kommer att vara synlig genom den genomskinliga stroke. I det idealiska fallet kommer detta tillvägagångssätt att bilda effekten och innehåller minimikoden. Men Opera 11 visar bakgrundsfärgen genom den genomskinliga stroke endast under förutsättning att egenskapen Border-Radius är inställd.
Anmälan: Före: Absolut; Top: 0; Höger: 0; Bredd-Bredd: 8px; Gränsfärg: #ffffffffr transparent transparent; bakgrund: # 658e15; -Webkit-gräns botten-vänster-radie: 5px; -moz -Border-Radius: 0 0 0 5px; Border-Radius: 0 0 0 5px; Display: Blockera; Bredd: 0;)
CSS-fil för demonstrationssidan innehåller kommentarer som är användbara för arbete. Varje webbläsare har sina egna egenskaper när du använder gränsen Radius eller stroke av element utan bredd och höjd.
Slutlig bild av kod
Följande CSS-kod ges nedan, vilket är nödvändigt för att skapa effekten av krökta hörn med lätta skuggor och använda endast ett HTML-element.
Position: släkting; Bredd: 30%; Padding: 1EM 1.5EM; Marginal: 2em Auto; Färg: #fff; Bakgrund: # 97c02f; Överflöde: Dold; ); -Shadow: 0 1px 1px rgba (0,0,0,0,3,3), -1px 1px 1px rgba (0,0,0,0,2); -Moz-box-skugga: 0 1px 1px rgba (0, 0,0,0,3,3), -1px 1px 1px rgba (0,0,0,0,0,2); Box-Shadow: 0 1px 1px rgba (0,0,0,0,3,3), -1px 1px 1px RGBA (0,0,0,0,0,2); Display: Blockera; Bredd: 0; / * Övervinna begränsningar Firefox 3.0 * /) .Note.Rounded (-WebKit-Border-Radius: 5px; -moz -Border-Radius: 5px; Border-Radius: 5px;) .Note.Rounded: Innan (Border Width: 8px; Gränsfärg: #ff #fff transparent transparent; -WebKit-Bottom-Radius: 5px; -Moz-gräns Radius: 0 0 0 5px; Border-Radius: 0 0 0 5px;)
Slutsats
Demo-sidan innehåller exempel med olika färger för att se till att det finns tillräcklig användarvänlighet av effekten.
Man bör komma ihåg att denna teknik fungerar värre när du använder bilden som bakgrund för objektet än när du använder en enkel färg. Men sådana begränsningar har också andra metoder för att organisera reducerande hörn.
Vlad Merzehevich
På webbplatser appliceras trianglar alls och stängs som en del av designelementen, till exempel tjänar de som en pekare till ett objekt, vilket styr läsarens uppmärksamhet åt rätt plats. Även trianglar utför dekorativa funktioner, vilket gör block där de används, mer eleganta och moderna. I fig. 1 visar ett exempel på att använda en triangel i design.
Fikon. 1. Trianglar i webbdesign
Du kan inte direkt göra en triangel med CSS-verktyg, så två metoder tillåter dig att lägga till den i gränsen och omvandla.
Använder gränsen.
Även om gränserna som skapas genom gränsen egendom inte är direkt relaterade till trianglar, är det oftast att användas för detta. Om du ställer in nollbredden och höjden på elementet, såväl som installerar en tillräckligt tjock gräns, ser vi en uppsättning av fyra trianglar (fig 2). För tydlighet ställs gränserna på alla sidor olika färger.
Fikon. 2. Lägga till gränsen till objektet
Om du lämnar den önskade gränsen, och resten genom att göra genomskinlig, får vi triangeln av den önskade färgen (fig 3).
Fikon. 3. Element med transparenta gränser
Exempel 1 visar tillsatsen av en triangel till blocket genom ett pseudo-element:: efterlopp.
Exempel 1. Blockera med triangel
För absolut placerade element är nollbredd och höjd inte nödvändig.
På grund av kombinationen av gränser kan du få ytterligare fyra typer av trianglar, som i kombination med redan nämnts ger oss åtta alternativ. Deras utseende och önskad kod visas i tabell. ett.
| Se | Stil |
|---|---|
| gräns: 20px solid transparent; Border-top: 20px solid grön; | |
| gräns: 20px solid transparent; Border-höger: 20px solid grön; | |
| gräns: 20px solid transparent; Gränsbotten: 20px solid grön; | |
| gräns: 20px solid transparent; Border-Left: 20px solid grön; | |
| gräns: 20px solid transparent; Border-top: 20px solid grön; Border-höger: 20px solid grön; | |
| gräns: 20px solid transparent; Border-höger: 20px solid grön; Gränsbotten: 20px solid grön; | |
| gräns: 20px solid transparent; Gränsbotten: 20px solid grön; Border-Left: 20px solid grön; | |
| gräns: 20px solid transparent; Border-Left: 20px solid grön; Border-top: 20px solid grön; |
Från bordet kan det ses att osynliga gränser upptar en plats, överväga det när objektpositionering. Style, det är också nödvändigt att lägga till nollbredd och höjd eller använda positionsfastigheten, vilket gjordes i exempel 1.
Triangeln kan göras med en annan form om du ställer in olika tjocklek på gränserna. Så, koden för att skapa ett block som visas i fig. 4 ges i exempel 2.
Fikon. 4. Akut triangel
Exempel 2. En skarp triangel
Med gränsen får vi solida färgade trianglar, för att skapa en ram som visas i fig. 5 måste gå på listigt och införa ett element ovanpå en annan med lite förskjutning. Återigen hjälper pseudo-element oss: före och: efter (exempel 3).
Fikon. 5. Ram med hörn
Exempel 3. Överlay trianglar
På grund av det faktum att vi applicerar ett enda element ovanpå, är den här metoden endast lämplig för monotont fyllning och är inte lämplig för gradienter eller bakgrundsbilder.
Användning av transformation
Med hjälp av omvandling kan vi rotera det fyrkantiga elementet med 45 ° och få en rhombus från den. Detta är inte en triangel som sådan, så vi måste lämna den utskjutande delen till oss, och resten av gömmer efter ett annat element (exempel 4).
Exempel 3. Transformation
Resultatet av detta exempel visas i fig. 6.
Fikon. 6. Triangel med skugga
, , - CSS-egenskaper - (Transparent) - CSS-fastighet. Ansvarig för att skapa en diagonal ram
- "Px" - värde i pixlar
I den här artikeln kommer vi att prata med dig om att skapa en ram, men inte vanlig torg, men avrundad. De har mer vacker utsikt än vanliga fyrkantiga ramar utan avrundning.
Fast egendom
I den här artikeln kommer vi att överväga att skapa runda ramar i detalj och inte bara. I CSS finns det en sådan sak som en triangulär ram, men nedan.
Avrunda ramar med
HTML (Marginal: 0; Padding: 15VH 0 0 0;) #Content (kant: 5px solid röd; höjd: 70vh; Bredd: 80%; Border-Radius: 15px; Marginal: 0 Auto) Med denna CSS-fastighet kan du runda gränserna för elementet. Vissa utvecklare använder den utan att skapa en synlig ram, för att skapa layouter på en kroppsbehållare avrundad.
Med hjälp av standardradier kan du skapa avrundade figurer, till exempel en cirkel eller oval.
För att spåra operationen av den här egenskapen är det tillräckligt att ställa in fastigheten.
Egendoms egendom
Enkel egendom
Avrundningen kan appliceras på alla HTML-element, men inte i alla fall. Vissa webbläsare uppfattar inte det när du laddar de ramar som har en egendom.
För att bestämma rondellradien kan du använda olika värden, men oftast är värdet inställt i pixlar. Detta beror på det faktum att de är bäst lämpade för att detaljera små element.
Förutom den vanliga avrundningen kan en extra radie användas, till exempel för att skapa en ellips.
För att göra detta är det nödvändigt att dela upp värdena på skottet.
Fast egendom - Exempel:
Nu visar vi ett par exempel på att skapa en rundad kant. För att studera dem mer detaljerat, ladda ner våra källor.
Skapa trianglar med
För att skapa trianglar är det nödvändigt att använda fastigheten
Ställ först nollbredden och höjden för elementet med en triangel.
Därefter skriv ner flera egenskaper. Den första är det viktigaste, ramens egendom. Det är skapat nästan som vanligt. Vi ställer bredden, linjetypen och anger värdet "transparent". Det är ansvarigt för att skapa en triangel.
För att skapa en smidig sida av triangeln måste du skapa en separat rad i ramen för den här sidan.
Slutsats
Nu vet du allt om egendom
Först kan det verka mycket svårt, men om det praktiseras är allt lättare än du tror. Ladda ner våra källor och studera sin kod för en bättre förståelse för egenskapens arbete. Vi önskar lycka till att lära oss!
Taggar: till din uppmärksamhet Ett vackert urval av hörn och ramar som är avsedda för informationsblock, som används med hjälp av HTML och CSS. Också i den här artikeln kan du välja vilken designstil som är gjord på hörnen, vilket gäller med effekten när du svänger och installerar standard utan några effekter, bara en elegant design.För ett exempel kan du ta en variation där de krökta hörnen är på blocket, och det är helt annorlunda än standarden. På vissa finns det ett alternativ för att placera olika band eller ställa in en bild som blocket är installerat inuti.
Alla presenterade materialet går i adaptiv form för olika tillstånd som för en stor bildskärm eller den minsta skärmen själv. Efter installationen på webbplatsen kommer det att finnas en förändring där det viktigaste är att locka uppmärksamhet, eftersom i början är strukturen bara på gång, vilket kan komplettera huvudstilen.
Första alternativet:
Nyckelfras
CSS.
Uguinsa_utomatio_npones (
Visa: Inline-block;
Bredd: 295px;
Position: släkting;
Border: 1.5px Solid # 1b629e;
Övergång: Allt .3 är lätt;
Marginal: 5px;
Markör: pekare;
}
.ugoinsa_utomatio_npones: Innan, .ugoinsa_utomatio_npones: Efter (
Innehåll: "";
Z-Index: -1;
Visa: Block;
Position: absolut;
Bakgrund: #fff;
Topp: 50%;
Vänster: 50%;
Transform: Översätt (-50%, -50%);
Animation-iteration-count: 1;
Transform-Ursprung: 50% 50%;
}
.ugoinsa_utomatio_npones: före (
Bredd: Calc (100% + 4px);
Höjd: 75%;
Z-Index: 1;
Övergång: Höjd 0,6s;
}
.ugoinsa_utomatio_npones: Efter (
Höjd: Beräkning (100% + 4px);
Bredd: 85%;
Z-Index: 1;
Övergång: Bredd 0,7s;
}
.ugoinsa_utomatio_npones: Hover: Innan, .ugoinsa_utomatio_npones: Focus: Innan (
Höjd: 50%;
}
.ugoinsa_utomatio_npones: Hover: Efter, .ugoinsa_utomatio_npones: Fokus: Efter (
Bredd: 74%;
}
.sepok_egulaned_demob (
Padding: 29px;
Z-Index: 2;
Position: släkting;
Text-Justera: Center;
}
Här, på egen hand, under din resurs, skapar en inställning och gör mer märkbar, beroende på vilken åtgärd.
Andra alternativet:
Zornet - Portal för webmasters
CSS.
Pvobamoco-mpagensive (
Position: släkting;
Visa: Inline-block;
Bredd: 283px;
Marginal: 7px 0 37px 0;
Padding: 28px;
Färg: # F3eaea;
Text-Justera: Center;
Bakgrund: # 2b22a0;
Bakgrund: Linjär-gradient (till vänster botten, transparent 50%, RGBA (16, 16, 16, 0,4) 0) NO-REPEAT 100% 0 / 30PX 30PX, linjär gradient (-135DEG, RGBA (0, 0, 0 , 0 0) 20px, # 334AB9 0);
Filter: Drop-Shadow (18px 28px RGBA (14, 14, 14, 0,1));
}
.pvobamoco-mpagensive :: före (
Innehåll: "";
Position: absolut;
Topp: 30px;
Rätt: 0;
Bakgrund: Linjär-gradient (till vänster botten, RGBA (0, 0, 0, 0) 50%, RGBA (14, 14, 14, 0,1) 0) 100% 0 NO-REPEAT;
Bredd: 28px;
Höjd: 28px;
Transform: Rotera (180deg);
}
Här är inledningsvis inte registrerad, men det finns en vacker skugga som du självständigt kan öka och ändra färgområdet.
Tredje alternativet:
Zornet.ru.
Zornet.ru.
Vi anger en beskrivning
CSS.
Keculosubes_aspectiveb (
Position: släkting;
Visa: Inline-block;
Bredd: 295px;
Padding: 30px;
Marginal: 9px;
Min-höjd: 91px;
Border: 2px solid # bfe2ff;
Text-Justera: Center;
}
.Malugoke_deculos (
Bredd: 148px;
Höjd: 148px;
Överflöde: Dold;
Position: absolut;
}
.Malugoke_deculos :: Före, .malugoke_deculos :: Eller (
Position: absolut;
Z-Index: -1;
Innehåll: "";
Visa: Block;
Border: 5px Solid # 2980b9;
}
.Malugoke_deculos span (
Position: absolut;
Visa: Block;
Bredd: 223px;
Padding: 15px 0;
Bakgrundsfärg: # 337AB7;
Box-Shadow: 0 5px 10px RGBA (12, 12, 12, 0,1);
Färg: # f3f0f0;
FONT: 700 18px / 1 "LATO", SANS-SERIF;
Text-Shadow: 0 1px 1px rgba (8, 8, 8, 0,1);
Text-transform: versaler;
Text-Justera: Center;
}
.Malugoke_deculos-Top-Left (
Topp: -10px;
Vänster: -10px;
}
.Malugoke_deculos-Top-Left :: Innan, .malugoke_deculos-Top-Left :: Efter (
Gräns-vänster-färg: transparent;
}
.Malugoke_deculos-Top-Left :: före (
Topp: 0;
Rätt: 0;
}
.Malugoke_deculos-Top-Left :: Efter (
Vänster: 0;
Botten: 0;
}
.Malugoke_deculos-topp-vänster spänning (
Höger: -25px;
Topp: 30px;
Transform: Rotera (-45deg);
}
.Malugoke_deculos-top-höger (
Topp: -10px;
Höger: -10px;
}
.MALUGEKE_DECULOS-TOP-RIGHT :: Före, .malugoke_deculos-Top-Höger :: Efter (
Gräns-toppfärg: transparent;
Gräns-högerfärg: transparent;
}
.Malugoke_deculos-top-höger :: före (
Topp: 0;
Vänster: 0;
}
.Malugoke_deculos-top-höger :: efter (
Rätt: 0;
Botten: 0;
}
.MALUGEKE_DECULOS-TOP-RIGHT SPAN (
Vänster: -25px;
Topp: 30px;
Transform: Rotera (45deg);
}
Det återstår att välja rätt eller vänster band, för att installera på det block där själva tejpen kommer att tjäna till att skriva en rubrik på den. Ändra även färgen eller inrätta det standardblock som är installerat under tejpen.
Här kan webbutvecklaren vara vackert ordnad, för det är redan helt och hållet att vissa sätter skuggor, det beror allt på paletten i internetresursfärgen och i allmänhet där du kommer att vara och för vilket syfte att placera en sådan originalram .