Vóór de komst van CSS3, om elementen aan webpagina's toe te voegen, zoals formulieren of knoppen, afgeronde hoeken, was het nodig om een aantal afbeeldingen en veel extra opmaak te gebruiken. Gelukkig nu afgerond CSS-hoeken maakt het heel gemakkelijk om te maken. Dit kan ook worden gedaan met behulp van de eigenschap border-radius.
U kunt deze CSS3-eigenschap gebruiken voor de volgende browsers:
- Chroom 6+;
- Firefox 4+;
- Safari5+;
- IE9+;
- Opera 10.5+;
- Android 2.1+;
- iOS 3.1+.
We zullen werken met de klasse "info-box". Dit kan het gedeelte van uw webpagina zijn contactgegevens en jij wilt mee met behulp van CSS om de hoeken.
Schrijf de HTML-code van het element waarvan u de hoeken wilt afronden:
Infobox ( -webkit-border-radius: 20px; border-radius: 20px; achtergrondkleur: #000000; (
Opmerkingen:
We hebben zowel een leveranciersversie van de accommodatie als een reguliere versie toegevoegd. We voegen ook een achtergrondkleur toe. Om de hoekradius van het frame goed weer te geven, moet de achtergrond van het element verschillen van de achtergrond van het gebied waarin het element is geplaatst. Anders moet u randstijlen, breedte en kleur toevoegen.
Voordat u de afgeronde CSS-hoeken gaat maken, moet u er rekening mee houden dat in het gegeven voorbeeld alle vier de hoeken van het frame dezelfde straal hebben (20px).
Ongelijke hoekenU kunt ook panelen maken met afgeronde hoeken die van elkaar verschillen. Dit kunt u doen door for toe te voegen CSS-eigenschappen meerdere betekenissen. Met CSS-snelkoppelingen kunt u deze op één regel opgeven. De volgorde van het toekennen van waarden is: linksboven, rechtsboven, rechtsonder, linksonder:
Infobox ( -webkit-border-radius: 20px 60px 40px 30px; border-radius: 20px 60px 40px 30px; achtergrondkleur: #000000; (
Hoe maak je een cirkelEen ander effect dat u met deze eigenschap kunt creëren, zijn cirkelvormige afbeeldingen. Als je een afbeelding hebt die een perfecte vierkante vorm heeft, kun je CSS gebruiken om de hoeken van de afbeelding af te ronden, waarna het frame de randen van de afbeelding “afsnijdt” en een perfecte cirkel creëert.
Stel dat u een vierkante afbeelding in uw HTML-opmaak heeft met de klasse 'bio-pic'. Deze afbeelding kun je rond maken met de volgende CSS-code:
img.bio-pic ( -webkit-border-radius: 50%; border-radius: 50%; (
In dit geval is het niet nodig om een achtergrondkleur of randkleur in te stellen, omdat u deze stijlen aan de afbeelding toevoegt. Het afgeronde hoekeffect werkt omdat de afbeelding anders zal zijn dan de kleur van de achtergrond waarop deze is geplaatst.
De vertaling van het artikel “Rounded Corners with CSS3 Border Radius” werd voorbereid door het vriendelijke projectteam.
Goed slecht
In de vorige les hebben we geleerd hoe je een rand voor een element kunt instellen. We hebben ook gekeken naar eigenschappen als border-color en border-style , waarmee je de kleur en stijl van de rand kunt aanpassen. Al onze frames kwamen echter uit met rechte hoeken. Nu laten we u zien hoe u in CSS afgeronde hoeken voor randen kunt maken.
Hoeken afronden: CSS3 border-radius-eigenschapHet afronden van hoeken in CSS kan voor elk element op een HTML-pagina worden gedaan. Om dit te doen, moet u de eigenschap border-radius erop toepassen met de juiste waarde. Meestal wordt de waarde gespecificeerd in pixels, maar er kunnen ook andere eenheden worden gebruikt, zoals em of percentage (in het laatste geval is de berekening relatief ten opzichte van de breedte van het blok).
Effect van dit pand zal alleen opvallen als het element dat wordt gestyled een gekleurde achtergrond en/of rand heeft. Bijvoorbeeld:
BorderElement (achtergrondkleur: #EEDDFF; rand: 6px effen #7922CC; randradius: 25px; )
De hierboven beschreven stijl levert het volgende resultaat op op een element van 200x200 pixels:
Je kunt ook alleen afgeronde randen maken voor de boven- of onderhoeken van het element, of elke hoek een andere afrondingsradius geven - veel ruimte voor fantasie! Voorbeeld:
BorderElement ( achtergrondkleur: #EEDDFF; rand: 6px effen #7922CC; randradius: 25px; ) .borderElement1 ( achtergrondkleur: #FFE8DB; rand: 6px effen #FF5A00; randradius: 15px 100px 15px 100px; ) 
Maar dat is nog niet alles: in plaats van eenvoudige ronde hoeken kunt u een elliptische afronding opgeven. Om dit te doen, moet u twee waarden opgeven, gescheiden door een schuine streep (voor de horizontale en verticale halve assen van de ellips). Laten we een voorbeeld geven van een blok van 150×450 pixels:
BorderElement (achtergrondkleur: #EEDDFF; rand: 6px effen #7922CC; randradius: 280px/100px; ) 
Je kunt de waarden combineren (dat wil zeggen zowel normaal als elliptisch afgerond in dezelfde stijl gebruiken), en je kunt ook voor elke hoek een persoonlijke stijl toevoegen met behulp van de juiste eigenschappen:
- border-top-left-radius - voor de linkerbovenhoek;
- border-top-right-radius - voor de rechterbovenhoek;
- rand-linksonder-radius - voor de linkerbenedenhoek;
- border-bottom-right-radius - voor de rechter benedenhoek.
De onderstaande afbeelding laat zien hoe hoekafronding wordt berekend in CSS. Als er dus één enkele waarde is opgegeven voor de hoek (bijvoorbeeld 20px), betekent dit dat de afronding plaatsvindt langs een cirkel met een straal van 20 pixels. In het geval dat twee waarden zijn opgegeven, gescheiden door een schuine streep, bijvoorbeeld 30px/20px , worden de hoeken afgerond langs een ellips. De eerste waarde is in dit geval de lengte van de horizontale halve as van de ellips - 30px, en de tweede waarde is de lengte van de verticale halve as - 20px:
Eigendom CSS-randradius door iedereen gesteund moderne versies browsers.
Iedereen is de traditionele rechthoekige hoeken bij het ontwerpen van websites al lang beu. Afgeronde hoeken zijn in de mode, die niet met afbeeldingen worden gemaakt, maar met stijlen, waarvoor de eigenschap border-radius wordt gebruikt. Deze eigenschap kan één, twee, drie of vier waarden hebben, gescheiden door een spatie, die de straal van alle hoeken of elk afzonderlijk bepalen.
In tabel 1 gegeven verschillende hoeveelheden waarden en het type blok dat in dit geval wordt verkregen.
| div (randradius: 10px; ) | Afrondingsradius voor alle hoeken tegelijk. | |
| div ( grensradius: 0 10px; ) | De eerste waarde stelt de straal van de hoeken linksboven en rechtsonder in, de tweede waarde stelt de straal voor de hoeken rechtsboven en linksonder in. |  |
| div (randradius: 20px 10px 0; ) | De eerste waarde stelt de straal van de linkerbovenhoek in, de tweede - zowel rechtsboven als linksonder, en de derde waarde - rechtsonder. |  |
| div (randradius: 20px 10px 5px 0; ) | Stelt opeenvolgend de straal in van de hoeken linksboven, rechtsboven, rechtsonder en linksonder. |  |
Voorbeeld 1 laat zien hoe u een blok met afgeronde hoeken maakt.
Voorbeeld 1. Hoeken van een blok
HTML5 CSS3 IE 9+ Cr Op Sa Fx
Straal van div ( achtergrond: #007E3E; /* Achtergrondkleur */ kleur: #fff; /* Tekstkleur */ opvulling: 10px; /* Marges rond tekst */ randradius: 5px; /* Hoeken */ ) Ik - aanvullende vorm van de accusatief uit i.
Resultaat dit voorbeeld getoond in afb. 1.
Rijst. 1. Blok met afgeronde hoeken
Een interessant effect kan worden verkregen als u de afrondingsradius groter instelt dan de helft van de hoogte en breedte van het element. In dit geval krijgt u een cirkel. Voorbeeld 2 laat zien hoe u een ronde knop met een afbeelding maakt.
Voorbeeld 2: Ronde knop
HTML5 CSS3 IE 9+ Cr Op Sa Fx
Knopknop ( achtergrond: #f2f6f8; /* Achtergrondkleur */ rand: 1px effen #7a7b7e; /* Randopties */ breedte: 60px; /* Knopbreedte */ hoogte: 60px; /* Hoogte */ randradius: 30px) 
Het resultaat van dit voorbeeld wordt getoond in Fig. 2.
Rijst. 2. Ronde knop
IN Opera-browser de afronding wordt onjuist toegepast als er geen rand is opgegeven via de eigenschap border.
De eigenschap border-radius kan worden gecombineerd met andere eigenschappen, bijvoorbeeld door een schaduw aan een element toe te voegen. In voorbeeld 3 wordt een reeks cirkels gemaakt, waarvan er één wordt gemarkeerd met box-shadow . Met deze set kunt u door pagina's of foto's navigeren.
Voorbeeld 3. Gloed
HTML5 CSS3 IE 9+ Cr Op Sa Fx
Glow body ( achtergrond: #608DA2; /* Webpagina-achtergrond */ ) ul ( lijststijl: geen; /* Markeringen verwijderen */ ) li ( weergave: inline-block; /* Inline blokelement */ border: 2px effen #fff; /* Omtrekparameters */ marge-rechts: 5px; /* Rechtermarge */ achtergrond: #000; /* breedte: 10px; /* Breedte en hoogte */rand -radius: 10px; */ ) li.active ( achtergrond: #b00; /* Rode achtergrond */ box-shadow: 0 0 4px 2px #fff; /* Glow-parameters */ )
Het resultaat van dit voorbeeld wordt getoond in Fig. 3.
Rijst. 3. Gloed rond de cirkel
MET met behulp van grensradius Je kunt niet alleen een cirkel maken, maar ook een ellips, maar ook een elliptische afronding op een blok. Om dit te doen, moet u niet één waarde schrijven, maar twee, gescheiden door een schuine streep. Als u 20px/10px schrijft, betekent dit dat de horizontale straal van de afronding 20 pixels is en de verticale straal 10 pixels. Voorbeeld 4 laat zien hoe u elliptische hoeken maakt om een bijschrift in stripboekstijl aan een foto toe te voegen.
Voorbeeld 4: Ellipsen
HTML5 CSS3 IE 9+ Cr Op Sa Fx
Elliptische hoeken div ( positie: relatief; ) span ( positie: absoluut; /* Absolute positionering*/ achtergrond: rgba(255,255,255,0,9); /* Wit doorschijnende achtergrond*/ ) .bulb1 ( breedte: 10px; hoogte: 10px; /* Breedte en hoogte */ links: 65px; boven: 85px; /* Positie */ grensradius: 10px; /* Verander het in een cirkel */ ) .bulb2 ( breedte: 20px; hoogte: 14px; /* Breedte en hoogte */ links: 45px; boven: 60px; /* Positie */ randradius: 10px/6px; /* Converteren naar een ellips */ ) .bulb3 ( links: 10px; boven: 15px; /* Positie */ opvulling: 5px 10px; randradius: 60px/15px; /* Een ellips maken */ ) Je bent je eigen leraar. 
Het resultaat van dit voorbeeld wordt getoond in Fig. 4.
Rijst. 4. Elliptische hoeken gebruiken
U kunt ook het uiterlijk van de hoeken op afbeeldingen wijzigen door de eigenschap border-radius toe te voegen aan de img-selector, zoals weergegeven in voorbeeld 5.
Voorbeeld 5: Afbeeldingen
HTML5 CSS3 IE 9+ Cr Op Sa Fx
Afbeeldingen body ( achtergrond: #4b5457; ) img ( border-radius: 10px; )
Alle moderne browsers standaarden ondersteunen hypertext-opmaak HTML5- en CCS3-stijl. En of uw site (template) dit ondersteunt moderne normen, dan kunt u wijzigingen in het ontwerp aanbrengen, zoals het afronden van hoeken, schaduwen en verloopvullingen, zonder de hulp van grafische editors in te roepen.
Webmasters gebruiken het overal afgeronde hoeken in blokken en frames op websites. In dit artikel zal ik je vertellen hoe je de hoeken van afbeeldingen en foto's op de site kunt afronden zonder te gebruiken programma's van derden, alleen met behulp van CSS.
Om de voorbeelden in het artikel correct op uw scherm weer te geven, moet u de meeste gebruiken nieuwste versies browsers, FireFox, Chrome en browsers die daarop zijn gebaseerd: Yandex.Browser, Amigo enzovoort.
Afronding van hoeken van DIV-blokkenVolgens de CSS3-standaard moet een DIV, om afgeronde hoeken te hebben, een stijl hebben grensradius, bijvoorbeeld als volgt:
Randradius: 10px;
Laten we voor de duidelijkheid twee blokken tekenen met rechte en afgeronde hoeken:
Blok met rechte hoeken
Blok met afgeronde hoeken
Hoeken van afbeeldingen afrondenNaar analogie met bovenstaand voorbeeld kunt u de hoeken van afbeeldingen op de site, bijvoorbeeld foto's, afronden. Laten we voor de duidelijkheid de hoeken van de foto op de pagina afronden
Hier is de afbeelding zonder CSS-verwerking
En nu met afgeronde hoeken:
Randradius: 10px;
Om het echt “mooi” te maken, voegen we vanaf het begin wat randen toe...
Randradius: 10px; rand: 5px #ccc effen;
en dan de schaduwen:
Randradius: 10px; rand: 5px #ccc effen; vakschaduw: 0 0 10px #444;
De onderstaande optie (afgeronde hoeken met schaduw zonder rand) lijkt erg op een muismat:
Randradius: 10px; vakschaduw: 0 0 10px #444;
En tot slot een complete aanfluiting van het beeld
Randradius: 50%; rand: 5px #cfc effen; vakschaduw: 0 0 10px #444;
Als u de afbeelding in een nieuw venster opent, zult u zien dat deze (de afbeelding) ongewijzigd is en dat alle hoeken, schaduwen, enzovoort slechts het resultaat zijn van de verwerking CSS stijlen door uw browser.
Een kleine lyrische uitweidingStijl grens vergroot de afbeeldingsgrootte met de hoeveelheid rand. Als er een waarde is opgegeven rand: 5px, dan wordt de uiteindelijke afbeelding 10 pixels breder en groter. Houd hier rekening mee, in sommige gevallen werkt de lay-out van de site mogelijk niet.
Een stijl doos-schaduw heeft geen invloed op de grootte van de foto, de schaduw lijkt te bewegen aangrenzende elementen. Bij gebruik heeft de lay-out van de site er niet onder te lijden.
Hoe u de hoeken van afbeeldingen kunt afronden in WordPressIn alle bovenstaande voorbeelden heb ik stijlen rechtstreeks in de tags geschreven html-code. De laatste ziet er bijvoorbeeld zo uit:
Dit is handig als u één foto of foto opnieuw moet rangschikken. Wat als je alles wilt veranderen? Nou, je hoeft niet je hele site te beklimmen om de weergave van elke site te bewerken. In de meeste gevallen WordPress-tag IMG definieert verschillende stijlklassen. Eén op basis van de unieke naam van het afbeeldingsbestand, één op grootte en nog één op uitlijning. U kunt een ervan aanvullen met de bovenstaande parameters.
Bijvoorbeeld voor alle afbeeldingen waarvoor de uitlijning niet is opgegeven, in het bestand stijl.css de jouwe WordPress-thema's schrijf het volgende:
Uitlijnen (randradius: 10px; rand: 5px #cfc effen; vakschaduw: 0 0 10px #444; )
Ofwel het meest harde methode voor iedereen met een foto op de site. Laten we de stijl voor alle tags opnieuw definiëren IMG:
Img (randradius: 10px; rand: 5px #cfc effen; vakschaduw: 0 0 10px #444; )
De laatste optie is niet alleen geschikt voor WordPress, maar voor elk CMS. En zelfs voor simpel HTML pagina's in het geval dat, bij het weergeven van afbeeldingen, de tag IMG er worden geen stijlklassen toegewezen. Maar wees voorzichtig. Als u de weergaveopties voor tags overschrijft IMG jij zult veranderen verschijning ALLE foto's op de site!
In plaats van een conclusieAlle voorbeelden in het artikel zijn voorwaardelijk en zijn alleen bedoeld om enkele voorbeelden te demonstreren CSS-functies over beeldverwerking en laat zien hoe eenvoudig het is.
De vakantie nadert: Internationale Vrouwendag. Laten we ons er van tevoren op voorbereiden. Meisjes en vrouwen kunt u op een originele manier feliciteren door gebruik te maken van de hieronder besproken ansichtkaartendiensten.
Kant-en-klare ansichtkaartdiensten Maak online een ansichtkaart van 8 maart Profiteer ervan de volgende diensten
Ik hoop dat u door het gebruik van een van deze generatoren uw dames op 8 maart adequaat kunt feliciteren!
Inhoud van het artikel:
Google Plus Het Google Plus-platform voldeed niet aan de verwachtingen van de ontwikkelaars en wordt op 2 april 2019 volledig verwijderd. Albums die eraan gekoppeld zijn, verdwijnen mee. Google Foto's, zal worden ontoegankelijke autorisaties op sites met een Google Plus-account. Al op 4 februari werd het niet-beschikbare functie Google Plus-profielen, kanalen en pagina's maken. Als uw account waardevolle inhoud heeft opgeslagen, kunt u deze downloaden reservekopie.De veranderingen zullen vooral van invloed zijn op bloggers die hun blogs op Blogspot beheren. Sommige G+ widgets, G+ reacties en Google-profiel+. Dit staat vermeld in de melding in het Blogger-beheergebied:
Na de aankondiging van de stopzetting van het werk Google-API+, die gepland staat voor maart 2019, worden op 4 februari een aantal wijzigingen aangebracht in de integratie van Blogger met Google+.
Google+-widgets. Blogontwerpen ondersteunen niet langer de widgets +1-knop, Google+ volgers en Google+ badge. Alle exemplaren van deze widgets worden van je blog verwijderd.
+1 knoppen. De +1- en G+-knoppen worden verwijderd, evenals de links 'Publiceren op Google+' onder blogposts en in de navigatiebalk.
Houd er rekening mee dat als u gebruik maakt van aangepaste sjabloon, die heeft Google-functies+, het moet mogelijk worden gewijzigd. Neem voor aanbevelingen contact op met de persoon die u dit sjabloon heeft verstrekt.
Google+ reacties. Ondersteuning voor reacties wordt stopgezet vanaf met behulp van Google+, en voor alle blogs die deze functie gebruiken, wordt deze hersteld standaard opmerkingen Blogger. Reacties die via Google+ zijn geplaatst, kunnen helaas niet naar Blogger worden overgebracht, waardoor ze niet langer op je blog verschijnen. Verwijdering Google-reacties Plus Helaas worden reacties die in het systeem zijn gepubliceerd permanent verwijderd. U kunt alleen hetzelfde hulpmiddel gebruiken om back-upopmerkingen van Google+ naar uw computer te sturen. Alleen is er geen bootloader voor en kun je reacties alleen op een nogal kromme manier handmatig herstellen. Het is maar goed dat ik op tijd was. Hoe vervang ik het Google Plus-profiel door een Blogger-profiel Blog je op Blogspot, dan is het raadzaam om nu terug te keren van het Google Plus-profiel naar het Blogger-profiel (voor degenen die zijn overgestapt naar het Blogger-profiel). Google Plus in één keer). Ik raad aan dit nu te doen om dit te voorkomen onvoorziene situaties die kunnen optreden bij het verwijderen Google-accounts Plus. Hoe u uw Blogger-profiel terugkrijgt Dit kunt u eenvoudig doen in de Blogger-beheerinstellingen:
Instellingen -> Aangepaste instellingen–> Gebruikersprofiel – selecteer hier Blogger
Sla uw wijzigingen op.
Bevestig de overgang naar en voer uw naam of bijnaam in.
Vergeet niet een avatar op je Blogger-profiel te uploaden.
Hoe een Google Plus-profiel te verwijderen Als u besluit om voor eens en voor altijd van uw G+ profiel af te komen, ga dan naar uw Google Plus-pagina -> Instellingen -> scroll naar de onderkant van de pagina -> verwijder Google Plus-account:
Vandaag vertel ik je wat CSS3 is, waar het mee wordt gebruikt, waar je het moet zoeken en hoe je het correct schrijft. Ik waarschuw je, ik zal het uit mezelf vertellen, vereenvoudigd voor het grote publiek, zoals ik het zie + voorbeelden. Laten we dus op afstand beginnen.
CSS zijn stijlen waarin de eigenschappen van een object worden geschreven. Ze zitten dus in iedereen bestaande motoren, als je ze niet kunt vinden, dan zoek je ofwel op de verkeerde plaats, ofwel bestaan ze echt niet ( kromme plaats). Waar worden ze meestal gevonden? Meestal is dit de root van de site, de naam van het style.css-bestand, hoewel de naam in principe niet zo belangrijk is als de .css-extensie als het bestand met een dergelijke extensie een stijlbestand is.
Zie ook op mijn blog.
