Share
Vandaag zou ik je een leuk trucje willen laten zien. We zullen een documentpictogram maken met pure CSS3. Beter nog, dit effect vereist slechts één HTML-element.
Laten we beginnen!
We beginnen met het toevoegen van ons unieke HTML-element: een ankertag. Dit is logisch, omdat de meeste pictogrammen ook als links fungeren.
Documentpictogram
Laten we de enigszins arbitraire dimensies voor ons pictogram instellen. We doen 40x56px - gewoon voor deze demo. In een toepassing in de echte wereld zul je dit waarschijnlijk willen verminderen! Houd er ook rekening mee dat we moeten toevoegen weergeven: blokkeren, omdat alle ankertags standaard inline zijn.
.docIcon background: #eee; achtergrond: lineair verloop (boven, #ddd 0, #eee 15%, #fff 40%, #fff 70%, #eee 100%); border: 1px solid #ccc; display: block; width: 40px; hoogte: 56px; position: relative; marge: 42px auto;
Merk op dat we hierboven een positioneringscontext instellen om binnenkort met pseudo-elementen te werken. U zult merken dat ik alleen de officiële CSS3-syntaxis voor het verloop heb gebruikt. U zult waarschijnlijk ook de verschillende voorvoegsels van de browser willen gebruiken. Om de zaken te versnellen, kunt u Prefixr.com of de API in uw favoriete codebewerker gebruiken. Kopieer eenvoudig het bovenstaande codefragment, plak het in het tekstgebied Prefixr en klik op Enter. Het spuugt dan alle verschillende prefix-eigenschappen uit, zoals:
.docIcon background: #eee; achtergrond: -webkit-lineair verloop (bovenaan, #ddd 0, #eee 15%, #fff 40%, #fff 70%, #eee 100%); achtergrond: -moz-linear-gradient (boven, #ddd 0, #eee 15%, #fff 40%, #fff 70%, #eee 100%); achtergrond: -o-lineaire gradiënt (boven, #ddd 0, #eee 15%, #fff 40%, #fff 70%, #eee 100%); achtergrond: -ms-lineair verloop (boven, #ddd 0, #eee 15%, #fff 40%, #fff 70%, #eee 100%); achtergrond: lineair verloop (boven, #ddd 0, #eee 15%, #fff 40%, #fff 70%, #eee 100%); border: 1px solid #ccc; weergave: blok; breedte: 40px; hoogte: 56px; positie: relatief; marge: 42px auto;
Laten we vervolgens wat glans toevoegen met behulp van CSS-vakschaduwen. Ik heb ook het tekst streepje eigenschap om de tekst te verbergen.
.docIcon ? -webkit-box-shadow: inzet rgba (255,255,255,0,8) 0 1px 1px; -moz-box-shadow: inzet rgba (255,255,255,0,8) 0 1px 1px; box-shadow: inzet rgba (255,255,255,0,8) 0 1px 1px; text-indent: -9999em;
Vervolgens moeten we een afgerond hoekeffect maken. Voeg het volgende toe:
.docIcon ? -webkit-border-radius: 3px 15px 3px 3px; -moz-border-radius: 3px 15px 3px 3px; grensradius: 3px 15px 3px 3px;
Door vier waarden door te geven, kunnen we de radiostralen bovenaan, rechts, onder en links dienovereenkomstig specificeren. Dit is vergelijkbaar met de manier waarop u marges of opvulling zou toepassen.
Om de illusie van een gekrulde hoek te creëren, gebruiken we gegenereerde inhoud of pseudo-elementen.
Voeg eerst inhoud toe :voor ons pictogram. In dit geval hebben we geen specifieke tekst nodig. In plaats daarvan moeten we een vak van 15 px maken en een achtergrondverloop toepassen.
.docIcon: before content: ""; weergave: blok; positie: absoluut; boven: 0; rechts: 0; breedte: 15px; hoogte: 15px; achtergrond: #ccc; achtergrond: -webkit-lineair verloop (45deg, #fff 0, #eee 50%, #ccc 100%); achtergrond: -moz-linear-gradient (45deg, #fff 0, #eee 50%, #ccc 100%); achtergrond: -o-lineaire gradiënt (45deg, #fff 0, #eee 50%, #ccc 100%); achtergrond: -ms-lineaire gradiënt (45deg, #fff 0, #eee 50%, #ccc 100%); achtergrond: lineair verloop (45deg, #fff 0, #eee 50%, #ccc 100%); -webkit-vak-schaduw: rgba (0,0,0,0.05) -1px 1px 1px, inzet wit 0 0 1px; -moz-box-shadow: rgba (0,0,0,0.05) -1px 1px 1px, inzet wit 0 0 1px; box-shadow: rgba (0,0,0,0.05) -1px 1px 1px, inzet wit 0 0 1px; border-bottom: 1px solid #ccc; border-left: 1px solid #ccc;
Om ervoor te zorgen dat onze gegenereerde inhoud ook de rechtervrije afgeronde rand ontvangt, moeten we opnieuw dezelfde radii toepassen om deze uit te lijnen.
? -webkit-border-radius: 3px 15px 3px 3px; -moz-border-radius: 3px 15px 3px 3px; grensradius: 3px 15px 3px 3px;
Vervolgens gaan we de gebruiken :na psuedo-element om enkele stippellijnen toe te voegen om uitgezoomde tekst weer te geven. Pas een breedte van 60% toe, en a -Marge en margin-right van 20% (wat gelijk staat aan 100%). Vervolgens geven we een hoogte op en plaatsen we deze op 0 0.
.docIcon: after content: ""; display: block; positie: absoluut; left: 0; top: 0; width: 60%; marge: 22px 20% 0; hoogte: 15px;
Het maken van een reeks regels is een beetje lastig. Als we slim zijn, kunnen we CSS-gradiënten gebruiken om dit effect te bereiken. Deel eerst de totale hoogte door vijf en stel elk blok in met een effen vulling. Raadpleeg de afbeelding hieronder voor een duidelijker voorbeeld van dit denken. Handig, toch? Het is een leuke techniek om in je gereedschapsriem te hebben.
.docIcon: after ? achtergrond: #ccc; achtergrond: -webkit-lineaire gradiënt (bovenkant, #ccc 0, #ccc 20%, #fff 20%, #fff 40%, #ccc 40%, #ccc 60%, #fff 60%, #fff 80%, #ccc 80%, #ccc 100%); achtergrond: -moz-lineaire gradiënt (bovenkant, #ccc 0, #ccc 20%, #fff 20%, #fff 40%, #ccc 40%, #ccc 60%, #fff 60%, #fff 80%, #ccc 80%, #ccc 100%); achtergrond: -o-lineaire gradiënt (bovenkant, #ccc 0, #ccc 20%, #fff 20%, #fff 40%, #ccc 40%, #ccc 60%, #fff 60%, #fff 80%, #ccc 80%, #ccc 100%); achtergrond: -ms-lineaire gradiënt (bovenkant, #ccc 0, #ccc 20%, #fff 20%, #fff 40%, #ccc 40%, #ccc 60%, #fff 60%, #fff 80%, #ccc 80%, #ccc 100%); achtergrond: lineair verloop (bovenkant, #ccc 0, #ccc 20%, #fff 20%, #fff 40%, #ccc 40%, #ccc 60%, #fff 60%, #fff 80%, #ccc 80 %, #ccc 100%);
Live demonstratie Vond je het leuk? Andere soortgelijke trucs hebben? Zo ja, link naar hen in de opmerkingen hieronder.
Accentsconagua