+3 votes
232 views
in Web design by (242k points)
reopened
CSS tricks: useful snippets for your web project

1 Answer

+4 votes
by (1.6m points)
edited
 
Best answer

How to list titles
Hide elements without affecting the SEO of your website
Create text shadows
Edit web parts with CSS filters
Align titles optimally
Highlight the first letter of a paragraph
Use the Parallax effect
Highlight required fields on a form
Lists with triangular bullets

image

CSS tricks: useful snippets for your web project

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.

How to list titles

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:

image
With CSS you can number titles and subtitles

Hide elements without affecting the SEO of your website

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; }  

Create text shadows

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:

image
This is what text looks like that has been shaded with a CSS code snippet

Edit web parts with CSS filters

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%..

image
image
CSS allows you to modify graphic elements of a website with filters such as the "greyscale" of the image

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

Standard: 1, Lighten:> 1, Darken: <1

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)

Align titles optimally

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).

Highlight the first letter of a paragraph

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..

image
CSS pseudo-classes allow you to highlight HTML elements separately. In the example in the image, the :: first-letter class is used to create a capital letter at the beginning of the paragraph

Use the Parallax effect

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.

Highlight required fields on a form

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:

 

image
The two CSS pseudo-classes applied here highlight certain fields on a form based on their urgency

Lists with triangular bullets

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:

image
To use triangular bullets instead of circular ones, the code snippet above is implemented

...