10 ongelooflijke CSS-trucs om uw weblay-outs te transformeren

Iedereen met ervaring in webdesign, of je nu zelfgemaakte websitebouwers hebt gebruikt of een geheel nieuwe site hebt gemaakt, heeft waarschijnlijk al eerder van CSS gehoord. Deze ongelooflijk krachtige tool kan worden gebruikt om uw weblay-outs te transformeren, zodat u de controle over uw website krijgt en uw creatieve visie kunt verwezenlijken. Maar hoe kunt u trapsgewijze stylesheets gebruiken om het potentieel van uw volgende website te ontsluiten?

In deze handleiding wordt alleen een reeks CSS-eigenschappen beschreven die allemaal zijn gebruikt om de koptekst te maken die u in de bovenstaande afbeelding kunt zien. U vindt dit project hier op CodePen, zodat u het zelf kunt proberen.

CSS-beeldmanipulatie

De eerste stap die we moeten nemen om onze koptekstsectie te bouwen, is het toevoegen van afbeeldingen aan de pagina. U kunt een reeks methoden gebruiken om dit doel te bereiken, dus we hebben de meest populaire behandeld, samen met een aantal trucs om u te helpen uw afbeeldingen te manipuleren.

1. CSS-achtergrondafbeelding

We willen een achtergrondafbeelding op volledig scherm voor onze koptekst en de CSS-eigenschap voor de achtergrondafbeelding is ideaal. Eerst moeten we een container maken voor onze afbeelding (en de rest van de elementen in de kop).

We begonnen met het toevoegen van een div-tag met "header" als zijn klasse, gevolgd door het instellen van zijn hoogte tot 100vh en zijn breedte tot 100vw; dit geeft ons een doos die precies dezelfde grootte heeft als de viewport. We hebben ook een CSS-regel toegevoegd voor de hoofdtekst van de pagina, met zijn overloop ingesteld op verborgen en zijn marges ingesteld op 0px.

Met de container op zijn plaats kunnen we een achtergrondafbeelding toevoegen en er zijn drie verschillende CSS-regels die we nodig hebben om dit doel te bereiken. De eerste, achtergrondafbeelding, heeft een URL nodig om als bron van de achtergrondafbeelding te dienen, en we hebben hiervoor de handige Unsplash-catalogus gebruikt. We moeten ook de achtergrondformaat om te bedekken en de achtergrondpositie naar beneden, maar misschien wilt u hiermee experimenteren voor de beste resultaten.

2. CSS Achtergrond-Blend-modus

CSS-overvloeimodi maken het mogelijk om afbeeldingen en tekst te mengen, net zoals de overvloeifunctie in software zoals Adobe Photoshop. Om overvloeimodi te laten werken met onze achtergrondafbeelding, stellen we de achtergrondkleur naar semi-transparant wit voordat we de overvloeimodus toevoegen die we wilden gebruiken.

Hierna volgt background-blend-mode was ingesteld op zacht licht, waardoor we het beeld kunnen verzachten.

3. CSS Clip-pad

Voor onze volgende truc gebruiken we een regel genaamd clip-path. Wanneer u img HTML-tags gebruikt, kunt u een pad instellen dat delen van de afbeeldingen waarmee u werkt, verbergt. U kunt ervoor kiezen om hiervoor algemene vormen te gebruiken, maar u kunt ook een app gebruiken die SVG genereert om een ​​ingewikkelder ontwerp te maken.

We hebben een div-tag toegevoegd met "flex_image_box" om te fungeren als een container voor drie afbeeldingen, met behulp van de display CSS-eigenschap om er een flexbox van te maken (we zullen hier later over praten). Drie img-tags zijn toegevoegd in de div-tag, met ID's ingesteld als "img1", "img2" en "img3". De. instellen breedte van elke afbeelding tot 600px, we zijn in staat om laat de eigenschap height leeg zonder de beeldverhouding van de afbeeldingen te wijzigen; nu is het tijd om ons clippad toe te voegen!

Om onze drie driehoeken te maken, gebruikten we hetzelfde polygoon-clippad voor img1 en img3, met een omgekeerde versie voor img2. Ook moesten we spelen met de positionering van onze flexboxcontainer om ervoor te zorgen dat de beelden op de juiste plek op het scherm komen te staan. Onze clip-path-regels zijn hieronder te zien.

4. CSS-dekking

Dekking stelt het transparantieniveau van elk HTML-element in. We zetten de dekking van onze afbeeldingen tot 90%, waardoor ze enigszins ondoorzichtig zijn, zodat ze mooi versmelten met de achtergrond.

CSS-responsieve tekst en afbeeldingen

We hebben de kunst van het al verkend prachtige responsieve websites maken met HTML, CSS en JavaScript in het verleden, maar we kunnen voortbouwen op de principes die u al begrijpt, waardoor u een dieper inzicht krijgt in de vaardigheden die u nodig hebt om uw websitelay-outs onder de knie te krijgen.

1. CSS responsieve/relatieve eenheden

CSS-eenheden zoals px, pt en cm zijn absolute eenheden, en dit betekent dat een webbrowser ze op dezelfde grootte weergeeft, ongeacht de breedte en hoogte van het venster dat ze innemen. Relatieve eenheden zijn verschillend en produceren hoogtes en lengtes die relatief zijn aan andere metingen, zoals het browservenster of een bovenliggend element. De relatieve eenheden hieronder worden vaak gebruikt en zijn essentieel voor responsive webdesign.

• em: Deze eenheid wordt meestal gebruikt met tekst. Het is relatief aan de lettergrootte van het huidige element, waardoor 4em vier keer zo groot is als de ingestelde lettergrootte.
• rem: Net als em is rem relatief aan de lettergrootte van een element; het root-element in een hiërarchie wordt gebruikt om de uitvoergrootte te definiëren.
• vw/vh: Breedte en hoogte bepalen op basis van de grootte van de viewport, 2vw is gelijk aan 2% van de browserbreedte, terwijl 2vh gelijk is aan 2% van de browserhoogte.
• %: De %-eenheid berekent afmetingen op basis van de grootte van het bovenliggende element van een element.
• vmin/vmax: Deze eenheden produceren afmetingen in verhouding tot 1% van de kleinste of grootste afmetingen van de viewport, waardoor elementen de mogelijkheid hebben om direct te reageren op de grootte van een browservenster.

2. CSS-lettergrootte

Deze eigenschap kan worden ingesteld met standaardwaarden die vooraf zijn gedefinieerd door het hoofdstijlblad van de website of de webbrowser van de gebruiker. Deze waarden zijn onder meer medium, xx-small, x-small, small, large, x-large en xx-large, waarbij medium als standaard is ingesteld voor alle tekst zonder een CSS-tag op lettergrootte. Als alternatief kunnen relatieve waarden worden gebruikt bij het gebruik van de CSS-eigenschap font-size, en dit is de methode die we hebben gebruikt om ervoor te zorgen dat de tekst in onze koptekst de juiste grootte heeft voor elke uitkijk postje.

We hebben twee koptags aan onze HTML toegevoegd, waardoor we tekst aan het project kunnen toevoegen. De ene is een grote hoofdkop, terwijl de andere een subkop is, en beide gebruiken relatieve eenheden.

Verwant: Hoe de HTML-lettergrootte in CSS te wijzigen

3. CSS Breedte & Hoogte

Alle HTML-elementen hebben afmetingen voor hoogte en breedte, of ze nu div, img, a of een ander type tag zijn. Deze afmetingen kunnen automatisch worden ingesteld op standaardwaarden, maar ze kunnen ook worden gedicteerd door webontwerpers met behulp van de juiste regels; we hebben beide methoden gebruikt voor deze header.

Er zijn responsieve eenheden gebruikt voor de achtergrondafbeelding, waarbij de hoogte is ingesteld op 100vh en de breedte is ingesteld op 100vw, maar we hebben ook absolute eenheden gebruikt voor onze drie afbeeldingen. Het is de moeite waard om te verkennen en te experimenteren met CSS-eenheden voor breedte en hoogte, met opties zoals "overnemen" die de betekent om de afmetingen van een bovenliggend element over te nemen, en er zijn tal van andere trucs zoals deze die je kunt gebruiken.

4. CSS Mix-Blend-modus

CSS mix-blend-modus lijkt erg op de achtergrond-blend-modus, alleen kan het op elk element worden toegepast, in plaats van exclusief voor achtergronden te zijn. We hebben deze eigenschap op onze H1-rubriek gebruikt om textuur toe te voegen en het project interessanter te maken. We zijn begonnen met het instellen van onze tekstkleur naar zwart, gevolgd door het instellen van de mix-blend-modus naar overlay.

Het is de moeite waard om de verschillende overvloeiopties die je hebt bij het omgaan met tekst te verkennen, omdat achtergronden met unieke kleurprofielen anders zullen reageren op de instellingen die je gebruikt.

5. CSS-teksttransformatie

CSS text-transform is een slimme eigenschap waarmee ontwerpers de hoofdletters van de tekst op hun websites kunnen veranderen zonder de manier waarop zoekmachines deze lezen te beïnvloeden. We hebben bijvoorbeeld zet tekst-transformatie in hoofdletters op onze H1-kop, waardoor elke letter een hoofdletter wordt, ongeacht hoe we deze in onze HTML invoeren.

CSS-overloopeigenschappen

HTML lijkt vaak een rigide raamwerk dat strikte grenzen stelt aan de inhoud van uw websites, maar dit is niet het geval wanneer overloopeigenschappen worden gebruikt.

CSS-overloop en tekstoverloop

Overloop en tekstoverloop zijn zeer vergelijkbare CSS-eigenschappen. Overflow kan op elk element worden toegepast, waardoor u controle heeft over de inhoud die aan zijn grenzen kan ontsnappen. Tekstoverloop is vergelijkbaar, hoewel het alleen van toepassing is op tekst en u de mogelijkheid biedt om aanvullende parameters aan uw regels toe te voegen. We hebben alleen overloop gebruikt voor dit project (we hebben het gebruikt om de grootte van de hoofdtekst van onze pagina te beperken), maar je kunt lezen over tekstoverloop op de W3Schools website.

CSS gebruiken voor uw weblay-outs

CSS is een ongelooflijk krachtig hulpmiddel waarmee webontwerpers en ontwikkelaars verbluffende websites kunnen maken met behulp van code. We raden je aan om de CodePen te bekijken die we aan het begin van het artikel hebben gegeven, omdat dit je een nog dieper inzicht geeft in hoe al deze tools werken. Bovendien kun je spelen met de header die we hebben gemaakt om je eigen finishing touch toe te voegen.

8 essentiële CSS-tips en -trucs die elke ontwikkelaar zou moeten weten

Gebruik jij deze belangrijke CSS-methodes voor een snelle workflow en een mooi webdesign?

Lees volgende

Over de auteur