Home-theater-designers
Els pseudoelements són un dels selectors més avançats que estan disponibles per utilitzar-se a CSS. El propòsit principal d’aquests selectors és crear un estil únic, sense alterar el document HTML que s’utilitza per crear l’estructura bàsica d’una pàgina web determinada.
A continuació s’explica com utilitzar pseudo-elements a CSS.
com esborrar esdeveniments al calendari de l'iPhone
Pseudoelements comuns
Hi ha una llista extensa de pseudo-elements disponibles per facilitar la vida d’un desenvolupador web. Alguns d'aquests pseudoelements inclouen:
- Abans
- Després
- Teló de fons
- Primera línia
- Primera lletra
En situacions específiques, alguns pseudo-elements seran més adequats que d’altres, però l’única cosa que es manté constant és l’estructura general per utilitzar qualsevol pseudo-element.
Exemple d'estructura de pseudoelements
selector::pseudo-element{
/* css code */
} Tot i que podeu utilitzar un element HTML com a selector, es recomana utilitzar una classe o un identificador per evitar orientar els elements no desitjats del vostre disseny. L'element, l'estil o les dades que vulgueu inserir a la posició desitjada s'han de col·locar entre els claus.
Els pseudoelements anteriors i posteriors són els més populars de la llista i, atès que hi ha moltes maneres pràctiques d’utilitzar-los, no és difícil veure per què.
Utilitzant el pseudo-element Before a CSS
Tot i que no és impossible, és difícil superposar imatges amb text llegible a CSS. Això es deu sobretot a que la imatge i el text ocuparien la mateixa posició en una pàgina web.
És relativament fàcil enviar una imatge al fons d’un grup de text , però quan aquesta imatge és massa brillant tendeix a desbordar el text que hi ha a sobre. En aquests casos, el següent pas és intentar fer la imatge menys opaca mitjançant la propietat opacitat.
L’únic problema és que, atès que la imatge i el text ocupen la mateixa posició, el text també esdevindrà una mica transparent.
Una de les poques maneres efectives de resoldre aquest problema és utilitzant el pseudo-element d'abans.
Utilitzant l'exemple Before Pseudo-element
.landingPage{
/* Arranges the text on the image overlay */
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
/*sets the page to adjust to different screen sizes*/
height: 100vh;
}
.landingPage::before{
content:'';
/*imports an image*/
background: url(https://source.unsplash.com/_1EYIHRG014/1600x900)
no-repeat center/cover;
/*places an overlay on top of the image*/
opacity: 0.4;
/*makes the image visible*/
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}El codi anterior es crea per utilitzar-lo a l'uníson amb la classe HTML landingPage següent. Com es mostra al codi anterior, utilitzant el pseudo-element anterior podem orientar la imatge i utilitzar la propietat d’opacitat abans que la imatge es combini amb el text.
This is the result of using the before pseudo-element
to overlay and image with readable text.
Això farà que es col·loqui una superposició a la imatge i que es mostri text clar a la part superior, tal com es mostra a la imatge següent:
Utilitzant el pseudo-element After a CSS
Un ús pràctic del pseudo-element posterior és ajudar a la creació d’un formulari HTML. La majoria de formularis es creen amb un conjunt de camps que requereixen dades perquè el formulari s’enviï correctament.
Una manera d’indicar que un camp d’un formulari requereix dades és col·locant un asterisc després de l’etiqueta d’aquest camp. El pseudo-element after us proporciona una manera pràctica de fer-ho.
Utilitzant l'exemple After Pseudo-element
.required::after{
content: '*';
color: red;
} Si inseriu el codi anterior a la secció CSS del formulari, assegureu-vos que totes les etiquetes que continguin la classe requerida seran seguides directament d’un asterisc vermell. El pseudo-element posterior també és pràctic en aquest exemple perquè ajuda a separar l'estil de l'estructura (que sempre és ideal en el desenvolupament de programari).
puc tenir dos comptes d'Instagram
La propietat del contingut
Com es mostra a l'exemple de pseudo-element posterior, la propietat de contingut és l'eina que s'utilitza per inserir contingut nou en una pàgina web. Aquesta propietat només s’utilitza amb els pseudo-elements anteriors i posteriors.
És important tenir en compte que, fins i tot si no hi ha contingut disponible per alimentar-se a la propietat de contingut (com ara l'exemple anterior del pseudo-element anterior), encara se us demana que utilitzeu la propietat de contingut dins dels paràmetres anteriors o posteriors. pseudo-element per fer-los funcionar com es volia.
Ara podeu utilitzar pseudoelements a CSS
En aquest article, heu après a identificar i utilitzar pseudoelements als vostres programes CSS. Se us va presentar els pseudo-elements anteriors i posteriors i se us van donar maneres pràctiques d’utilitzar-los tots dos. També heu pogut comprovar per què la propietat del contingut és necessària per a l’ús correcte dels pseudo-elements anteriors i posteriors.
Compartir Compartir Tweet Correu electrònic 10 exemples de codis CSS simples que podeu aprendre en 10 minutsNecessiteu ajuda amb CSS? Proveu aquests exemples bàsics de codi CSS per començar, i apliqueu-los a les vostres pròpies pàgines web.
Llegiu a continuació Temes relacionats- Programació
- Web Design
- CSS
Kadeisha Kean és un desenvolupador de programari complet i escriptor tècnic / tecnològic. Té la capacitat diferent de simplificar alguns dels conceptes tecnològics més complexos; la producció de material fàcilment comprensible per a qualsevol novell en tecnologia. L’apassiona escriure, desenvolupar programes interessants i viatjar pel món (a través de documentals).
Més de Kadeisha KeanSubscriu-te al nostre butlletí
Uniu-vos al nostre butlletí per obtenir consells tècnics, ressenyes, llibres electrònics gratuïts i ofertes exclusives.
Feu clic aquí per subscriure-us