Today we bring you as a guest our agency seo to Hector Peña from Webelx, this article is for you if you are a professional who wants to learn some tips to help you become a better designer or if you are a hobbyist with a fairly extensive knowledge of HTML and CSS and want to expand your horizons slightly to be able to continue advancing with this language. It’s not like we’re going to decipher CSS secrets that no one knows.But in this mini-guide of tips and tricks, it is quite likely that you will find some features that will help you in your day-to-day life, either at work or in a project of your own, or in some specific thing you are going crazy with right now. This mini guide should be used by people with a minimum knowledge in CSS to be able to take advantage of it, if you think that you have not yet reached a sufficient knowledge to go ahead with this article we recommend you to visit this link to start from a more basic level. For beginners, just to say that CSS is a wonderful language that is not very difficult to assimilate, but it has a learning curve and you have to be patient when studying it.
Índice de contenidos
Increase your skills with these tips
As time goes by, CSS is becoming more and more powerful and offers your web development a wide range of possibilities. In this article we will offer you a series of advanced techniques to consolidate your CSS skills, keep in mind that some of them are still in an experimental phase and must be used in a controlled environment. As with everything, it is always good to test them and be cautious before using them in a real environment.
The use of SVG for icons
The nice thing about SVG is that it is compatible with all modern browsers and works well with all resolution types, so there is no reason to keep uploading icons in .jpg or .gif. Don’t forget to use the background-size to scale the background image to fit the container it is placed in. .logo { display: block; text-indent: -9999px; width: 100px; height: 82px; background: url(imagen.svg); background-size: 100px 82px; }
FIXED TABLE DESIGNS
It is a little known property but with very few compatibility issues that changes the way tables are rendered to a more predictable layout. table { table-layout: fixed; } The shape-outsideis a CSS property that allows you to create geometric shapes and make them float so that the text wraps around the outline of the shapes. .shape { width: 300px; float: left; shape-outside: circle(50%); }
BOXES RESPECTING THE ASPECT RATIO
Using 20% for the padding makes the height of the box 20% of its width. No matter the width, the “child” div will jump to the aspect ratio (100% / 20% 5:1). .container { height: 0; padding-bottom: 20%; position: relative; } .container div { border: 2px dashed #ddd; height: 100%; left: 0; position: absolute; top: 0; width: 100%; }
COLOR CHANGE TRANSITION ON MOUSEOVER
A really easy way to make your links (or any other element) look better. a { color: #000; -webkit-transition: color 1s ease-in; /* safari y chrome */ -moz-transition: color 1s ease-in; /* firefox */ -o-transition: color 1s ease-in; /* opera */ } a:hover { color: #000; }
STYLING BROKEN IMAGES
Broken images are usually a pain, but sometimes it happens that an image is no longer available for some reason on your website. Using some advanced CSS styles, it is possible to style broken images and display a
personalized error message to portal users. img { min-height: 50px; } img:before { content: " "; display: block; position: absolute; top: -10px; left: 0; height: calc(100% + 10px); width: 100%; background-color: rgb(230, 230, 230); border: 2px dotted rgb(200, 200, 200); border-radius: 5px; } img:after { content: "\f127" " Imagen rota de " attr(alt); display: block; font-size: 16px; font-style: normal; font-family: FontAwesome; color: rgb(100, 100, 100); position: absolute; top: 5px; left: 0; width: 100%; text-align: center; } Have you already tried what can be done with this technique? This is much cooler than what the default browsers show, eh!
EMPTY AND NON-EMPTY ATTRIBUTE SELECTORS
CSS3 makes it easy to apply different styles to an element, depending on whether a data-* attribute can be empty or not. This is what your HTML and CSS should look like, with a specific style for each div element with an empty data-attr attribute: div { border: 1px solid black; height: 100px; margin: 10px; width: 100px; } /* Selector de atributo vacío */ div[data-attr=''] { background: red; } /*Selector de atributo que no está vacío */ div:not([data-attr='']) { background: green; }
COMMA SEPARATED LISTS
This is a small snippet to display an unordered list as if it were a comma separated list. Note the use of :not(:last-child) to make sure that the last item in the list does not have a comma 😉 ul > li:not(:last-child)::after { content: ","; } We hope all these techniques will help you and as we usually say, the most important thing is that you practice over and over again in order to enhance your knowledge of CSS and HTML. With time and the practice of all this knowledge you will be able to differentiate yourself in this sector, in which studying day by day and continually updating yourself is the most valuable thing. And you know, if you are still hungry for more, there are a large number of selectors and attributes yet to be discovered in CSS that will make your developments easier and will give a plus of professionalism to your projects.
Tamara es redactora #seo y la boxeadora de la oficina. 🥊
Siempre escribe textos con gancho 😉
