nl.hideout-lastation.com
Paradijs Voor Ontwerpers En Ontwikkelaars


CSS-verloop Border-kleuren maken

Dit artikel maakt deel uit van onze "HTML5 / CSS3 Tutorials-serie" - speciaal bedoeld om u een betere ontwerper en / of ontwikkelaar te maken. Klik hier om meer artikelen uit dezelfde serie te zien.

Met alle nieuwe functies in CSS3 zijn we nu in staat om websites zonder beeld te bouwen. In het verleden was het gebruik van afbeeldingen onvermijdelijk als het gaat om het weergeven van verloopkleuren. Tegenwoordig wordt het veel leaner met het gebruik van CSS3 Gradient Background . In vorige berichten hebben we je laten zien hoe CSS3 Gradient in achtergrond en als achtergrond in verschillende vormen en richtingen kan worden gebruikt; Lineaire, elliptische en herhalingsgradiënten.

Maar CSS3 Gradient stopt niet alleen voor achtergrondgebruik. Wist je dat je het ook binnen grenzen kunt gebruiken ? Lees verder om te leren hoe dit te doen.

Eerste methode

De eerste methode is door CSS3 Gradient toe te passen in pseudo-elementen . Laten we kijken hoe de truc werkt.

Van boven naar beneden verloopgrens

We beginnen met een eenvoudig verloop dat zich van boven naar beneden verspreidt. Maak als volgt een box met een div om aan de slag te gaan.

HTML

CSS

 .box {width: 400px; hoogte: 400 px; achtergrond: #eee; } 

Als u het verloop in de kaderranden wilt vormen, plaatst u eerst een ononderbroken rand aan de boven- en onderkant van het vak. We maken ook 2 rechthoeken met 2 pseudo-elementen s - :before en :after - en specificeren de breedte in dezelfde grootte als de breedte van de doosrand. Plaats de rechthoeken aan de linker- en rechterkant van de doos en gebruik een linear-gradient door de background-image . Je kunt hieronder zien hoe deze truc uitpakt:

Links naar rechts Grensverloop

Laten we nu een verloop maken dat naar links en rechts op dezelfde manier loopt als in het vorige voorbeeld. Alleen, deze keer voegen we de kaderrand links en rechts toe, in plaats van bovenaan en onderaan. Evenzo gebruiken we ook pseudo-element - :before and :after - om 2 rechthoeken vorm te geven. Maar in tegenstelling tot het vorige voorbeeld plaatsen we ze nu aan de boven- en onderkant van de doos.

Diagonale randverloop

Het maken van een diagonaal verloop met deze truc is, technisch gezien, ingewikkeld.

Toch vertrouwen we op 2 pseudo-elementen :before en :after en gebruik linear-gradient . Deze keer zullen we echter 2 linear-gradient binnen het pseudo-element . En elke gradiënt loopt in tegenstelling tot elkaar. Zie de volgende broncode voor de details.

Tweede truc

De tweede methode is door CSS3 border-image . De eigenschap border-image in CSS3 stelt ons in staat om de rand met een afbeelding te vullen, evenals CSS3 Gradient. De browsers ondersteunen voor border-image zijn vrij groot; Chrome, Internet Explorer 11, Firefox, Safari en Opera zijn allemaal in staat om een border-image volledig te renderen. Het moet echter worden opgemerkt dat het border-image alleen op rechthoekige vormen of vakken werkt. Dat betekent dat het toevoegen van border-radius zal afwijken.

Het volgende is de specificatie van de border-image :

 border-image:  ; 

De is het pad dat de afbeelding opgeeft die in de rand wordt gebruikt. Hierin vullen we het in met CSS3 Gradient. Om dezelfde uitvoer te bereiken als in de voorgaande voorbeelden, passen we het CSS3-verloop binnen het border-image, als volgt.

 .box {width: 250px; hoogte: 250 px; achtergrond: #eee; rand: 20px solide transparant; -moz-border-image: -moz-linear-gradient (boven, # 3acfd5 0%, # 3a4ed5 100%); -webkit-border-image: -webkit-lineaire gradiënt (boven, # 3acfd5 0%, # 3a4ed5 100%); grensafbeelding: lineair verloop (naar beneden, # 3acfd5 0%, # 3a4ed5 100%); border-image-slice: 1; } 

Het border-image toont niets als we de randbreedte niet specificeren. Zoals u hierboven kunt zien, voegen we dus 20px van de randbreedte toe met transparante randkleur. Vervolgens stellen we de waarde van het border-image en de linear-gradient samen met het leveranciersprefix voor eerdere Webkit- en Firefox-versies.

De toevoeging van het bovenstaande randafbeeldingsegment zal de binnenste verschuivingen van de image-border inhoud instellen. Deze eigenschap is vereist om de helling volledig binnen het omringende gebied van de doos weer te geven. Zie de uitvoer hieronder:

Deze methode biedt meer flexibiliteit om de gradiënt in elke mogelijke richting aan te passen; van links naar rechts, van boven naar beneden, diagonaal of schuin. Hieronder zijn enkele voorbeelden:

Van links naar rechts verloop

Diagonaal verloop

50 prachtige kerk WordPress-thema's voor 2017

50 prachtige kerk WordPress-thema's voor 2017

Leesbaarheid, minimalisme en goede gebruikerservaring zijn veelvoorkomende dingen die een premium WordPress-thema zou moeten hebben. Meestal wordt in het geval van kerkwebsites niet veel aandacht besteed aan de ontwerpaspecten. Een WordPress-thema uit de moderne kerk biedt echter plaats aan de nieuwste ontwerptrends en nuttige informatie voor zijn gebruikers

(Technische en ontwerptips)

Werkgevers: Gen-X en Millennials laten samenwerken

Werkgevers: Gen-X en Millennials laten samenwerken

In de hedendaagse bedrijfsorganisaties is een baas als een orkestdirigent. Ik heb deze analogie geleend omdat het als een dirigent is die het tempo bepaalt en zorgt voor correcte invoer door elke muzikant in het orkest. De taak van een baas is om te weten wanneer en hoe verschillende talenten en vaardigheden van zijn medewerkers in het collectieve voordeel van de organisatie te werken

(Technische en ontwerptips)