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

Windows Apps op Android uitvoeren met Wine 3.0

Wijn is een van mijn onmisbare tools om aan Linux te werken. Als je Wine niet kent, is het een compatibiliteitslaag tussen Windows en Linux, die de kloof tussen de twee overbrugt en Windows-toepassingen op Linux laat werken ; bijna magisch.Hoewel Wine al sinds lange tijd beschikbaar is, bracht de nieuwe jaarrelease een belangrijke update met zich mee: ondersteuning voor Android

(Technische en ontwerptips)

5 Hulpmiddelen om uw CSS-codes te controleren en optimaliseren

Zodra uw website begint te groeien, zal uw code dat ook doen . Naarmate uw code groter wordt, kan CSS ineens moeilijk worden onderhouden en kan het voorkomen dat u de ene CSS-regel met de andere overschrijft. Dit compliceert dingen en je zult waarschijnlijk eindigen met veel bugs.Als dit met u gebeurt, wordt het tijd dat u de CSS van uw site controleert

(Technische en ontwerptips)