The CSS (Cascading Style Sheets) language revolutionized the World Wide Web. At a time when design, typography, and other graphic elements were hard-coded into HTML documents, the implementation of style sheets made this inflexible design methodology a thing of the past. Also, since the advent of HTML5, configuration items in HTML have been deprecated. From now on, the presentation and structure of a document are treated separately..
The development of CSS is in charge of W3C (World Wide Web Consortium) and it is done on a constant basis, which has opened the possibility of increasingly varied and complex design options, making its use increasingly complicated. Here is a compilation of CSS snippets and tricks that will surely be useful and interesting for your web project.
The numbering of titles and subtitles within an HTML document is usually done manually or by script. However, a simpler way to do this is through style sheets. This old CSS trick is supported by all browsers and works under the following code snippet:
#Título { counter-reset: heading; } h1:before { content: counter(heading)") "; counter-increment: heading; } h1 { counter-reset: subheading; } h2:before { content: counter(heading)"." counter(subheading)") "; counter-increment: subheading; } body{ font-family: courier new; }
As a result, the titles and subtitles will look like this:
Hide items like? display: none ;? or? visibility: hidden ;? of a website's HTML document is not well received by search engines . Although its excessive use is not recommended, the following CSS command represents an excellent possibility to hide these elements:
.hidden { position: absolute; top: -9999px; left: -9999px; }
Although it is possible to create text shadows using graphic programs, many times not all users have the necessary licenses or knowledge to do so and, furthermore, by opting for this option, the content becomes unreadable for search engines. Since the third version of CSS, different effects have been implemented that, combined, produce visually attractive results and do not alter the underlying text elements. The following CSS trick exemplifies text shading for this style sheet language:
p { font-size: 50pt; font-family: sans-serif; text-shadow: 10px 11px 18px rgba(300, 180, 100, 1), -10px -11px 18px red; }
This code defines two shadows (text shadow) for <p> elements . The number of shades can be expanded as desired; do not forget to always put a comma to separate the figures. The first two elements determine the position of the shadow (first the coordinate for X and then for Y). The third number defines the size. Finally, the color of the shadow is specified, either by RGBA indication (300, 180, 100, 1) as in the first line, or by absolute indication as in the second line (red). Once the previous CSS command has been applied, the text will look like this:
CSS is not only a good alternative to Photoshop in terms of text shading: this style sheet language also has interesting filters and visual effects similar to those of any image editing program. Implementing some CSS tricks makes it possible to edit and modify the design of graphics, backgrounds, texts or videos, increasing the brightness, changing the contrast or converting them to grayscale. These CSS filters are available for almost all modern browsers (with the exception of Internet Explorer). We exemplify its syntax with the grayscale filter:
.grayscale { -webkit-filter: grayscale(1); filter: grayscale(1); }
In this case, the filter determines? grayscale ?, followed by the specific value, in parentheses, that determines the intensity of the filter. Here, the value (1) means 100%..
Other CSS filters that can be very useful:
Filter
Description
Value
blur (VALUE)
Focus
Radius in pixels
brightness (VALUE)
illumination
Standard: 1, Lighten:> 1, Darken: <1
contrast (VALUE)
Tonal values
invest (VALUE)
Invert colors
Value of 1: Fully Invest
opacity (VALUE)
Transparency level
Maximum value: 1 (makes the element disappear completely)
saturation (VALUE)
Intensity of shades
Standard: 1, Increase:> 1, Decrease: <1
sepia (VALUE)
Sepia tones
Maximum value: 1 (equals 100% sepia tone)
There are no strict rules for descriptive text for an image. A centered image title looks good when it has no more than one line, otherwise the effect is not that great. On the other hand, an absolute left alignment is often a not very pleasant visual variant. The best solution is to handle changes from the <figure> container element , as well as in <figcaption> , both used, by default, for image titles. Here the corresponding snippet:
figure { text-align: center; } figcaption { display: inline-block; text-align: left; }
This CSS trick makes the image title align to the left, but display in the center as a consequence of the spec? inline-block ? (as long as it does not exceed the width of the image).
Pseudoclass calls allow you to individualize specific HTML elements, such as the first letter of a paragraph. Use? :: first-letter ? facilitates their editing in stories, especially children's stories:
p{ font-family: "bookman old style" } p:first-child::first-letter{ font-family: "papyrus"; font-size: 25px font-weight: bold }
This particular snippet uses? Papyrus? as the standard font for the first letter, and? Bookman Old Style? for the rest of the text..
Many modern web pages are based on the Parallax effect (parallax in Spanish), a trend that creates a slight sense of depth and is activated when the user moves their mouse cursor. This effect, created in combination with JavaScript or using jQuery, causes elements in the background to move at a slower speed than those in the foreground. The following CSS3 hack shows how to implement this famous type of swipe:
p { width: 100%; margin: auto; font-size: 50px; transform: scale(.5); font-family: courier new; font-weght: bold; } div { background-image: url("URL DES HINTERGRUNDBILDES"); background-attachment: fixed; transform: scale(1.25);} body { height: 100%; overflow: scroll; }
In the parameter? Background-image: url ? you will need to specify the URL of the background image. The values corresponding to the font and the size of the elements can be individually adapted.
The CSS commands? : required? Y ? : optional? facilitate the optimization of forms within a website. Both pseudo-classes make it easy to differentiate between required fields and optional fields within a form. The corresponding snippet is the following:
:required { border: 1px solid red; } :optional { border: 1px solid black; }
In this case, the required fields will have a red border, while the optional fields will have a black frame:
You don't always have to use the traditional round bullet for lists in your HTML documents. With the following CSS trick you can use triangle bullets:
ul { margin: 0.75em 0; padding: 0 1em; list-style: none; } li:before { content: ""; border-color: transparent #111; border-style: solid; border-width: 0.35em 0 0.35em 0.45em; display: block; height: 0; width: 0; left: -1em; top: 0.9em; position: relative; }
The result will be the following:
