Our CSS Animation Generator is the perfect tool for web developers and designers! You can build the perfect animation for your project, choosing from a wide variety of predefined animations or customizing any of them through user-friendly options. Tailor properties like name, duration, timing, and delay to suit your design needs, and bring your website to life with seamless motion effects. Perfect for beginners and experts alike, this tool makes creating animations easier, saving you lots of time and effort
Category: Css
Basic form validation with Angular – provide visual feedback with form changes CSS classes
Validating user input in HTML forms can be a tedious task. In this new series, we’ll look at how Angular can help us implement painless form validation. First, it’s essential to know that Angular relies primarily on native browser validation features that use modern HTML properties. For instance, if a form field has to be filled out, you can mark it as required using the required HTML attribute
Source: Basic form validation with Angular | Angular Newsletter
How to set width for table columns in CSS
Tables in html behaves differently than other elements on a page since the table, rows, th and td elements are displayed in a special way. The column width is automatically adjusted based on the content.
Here is a trick to set the column width using the colgroup element which affects both the th and td at once.
A table with 3 columns and 2 rows:
<table>
<colgroup>
<col class="col-select" />
<col class="col-product" />
<col class="col-country" />
</colgroup>
<thead>
<tr>
<th>Select</th>
<th>Product</th>
<th>Country</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox">Select</td>
<td>Product 1</td>
<td>Sweden</td>
</tr>
<tr>
<td><input type="checkbox">Select</td>
<td>Product 2</td>
<td>Norway</td>
</tr>
</tbody>
</table>
We have 3 columns: Select, Product and Country
To set the widths we use css classes col-select and so on.
.col-select {
width: 1%;
}
.col-product {
width: 75%;
}
.col-country {
width: 24%;
}
Here we set the select to be as “narrow” as possible (1%). And the others to relative % numbers.
To further “force” the widths we should allow long words to be wrapped, e.g add the following css class for the columns you wish this behavior for:
.text-break {
overflow-wrap: break-word;
}
Usage:
<colgroup> <col class="col-select" /> <col class="col-product text-break" /> <col class="col-country text-break" /> </colgroup>
A Complete Guide to Grid Tricks
Our comprehensive guide to CSS grid, focusing on all the settings both for the grid parent container and the grid child elements.
css-tricks.com/snippets/css/complete-guide-grid/
Pinegrow Web Editor | Website Builder for Professionals
Pinegrow Web Editor, website builder for professionalsPinegrow is a Mac, Windows and Linux web editor that lets you build modern websites faster with live multi-page editing, CSS & SASS styling, CSS Grid editor and support for Bootstrap, Tailwind CSS and WordPress.Pinegrow is a desktop website editor that opens and saves standard HTML and CSS files.
Source: Pinegrow Web Editor | Website Builder for Professionals
Flex Cheatsheet
Source: Flex Cheatsheet
white-space | CSS-Tricks
Here is a table to understand the behaviors of all the different values for property white-space:
| New lines | Spaces and tabs | Text wrapping | |
|---|---|---|---|
| normal | Collapse | Collapse | Wrap |
| pre | Preserve | Preserve | No wrap |
| nowrap | Collapse | Collapse | No wrap |
| pre-wrap | Preserve | Preserve | Wrap |
| pre-line | Preserve | Collapse | Wrap |
Source: white-space | CSS-Tricks
css3 – Sass Variable in CSS calc() function – Stack Overflow
Use Interpolate: body height: calc(100% – #{$body_padding})
Source: css3 – Sass Variable in CSS calc() function – Stack Overflow
Flexbox guide
Snippet for positioning items centered horizontally and vertically:
display: flex; /* turn flexbox on */ justify-content: center; /* center children horizontally */ align-items: center; /* center children vertically */
Snippets for container positioning items and IE10 rules:
/* IE 10 flexbox cheatsheet */ /* enable flexbox */ display: flex; display: -ms-flexbox; /* container - horizontal align items */ justify-content: flex-start | flex-end | center | space-around | space-between; -ms-flex-pack: start | end | center | distribute | justify; /* container - vertical align items */ align-items: flex-start | flex-end | center | stretch | baseline; -ms-flex-align: start | end | center | stretch | baseline; /* container - vertical height for items when extra space is available (multi line) */ align-content: flex-start | flex-end | center | space-around | space-between | stretch; -ms-flex-line-pack: start | end | center | distribute | justify | stretch;
Read more here:
css-tricks.com/snippets/css/a-guide-to-flexbox/
Legacy browser support: (E.g. Internet Explorer 10):
https://css-tricks.com/using-flexbox/
Cheatsheet flexbox equiv. for IE10:
https://gist.github.com/Paul-frc/3ed765ed10c9635384e98f58334081e4
CSS to highlight layout – great CSS hack
Different depth of nodes will use different colour allowing you to see the size of each element on the page, their margin and their padding. Now you can easily identify inconsistencies when working with the overall layout of elements…
* { background-color: rgba(255,0,0,.2);
outline: 1px solid rgba(255, 0, 0, 0.5);
}
* * { background-color: rgba(0,255,0,.2); }
* * * { background-color: rgba(0,0,255,.2); }
* * * * { background-color: rgba(255,0,255,.2); }
* * * * * { background-color: rgba(0,255,255,.2); }
* * * * * * { background-color: rgba(255,255,0,.2); }
* * * * * * * { background-color: rgba(255,0,0,.2); }
* * * * * * * * { background-color: rgba(0,255,0,.2); }
* * * * * * * * * { background-color: rgba(0,0,255,.2); }