Interesting CSS properties

Many times we write javascript or jquery for a particular effect. But these effects are easily achieved by CSS. We write many lines of code in javascript and jquery which can be achieved by writing a few lines of code in CSS. In this section, we will discuss some of them. In this blog, we will only discuss basic detail.

These are the following CSS properties which we will discuss in this blog.

• animation
• transform
• shape-outside
• background-blend-mode
• backface-visibility
• calc()
• var()
• @supports
• column-count
• currentColor
• table-layout
• hyphens

Animation

Animation is a new CSS property that allows for animation of most HTML elements (such as div, h1 and span) without JavaScript or Flash. At the moment, it’s supported in Webkit browsers, including Safari 4+, Safari for iOS (iOS 2+), Chrome 1+ and, more recently, Firefox 5. Unsupported browsers will simply ignore your animation code, so ensure that your page doesn’t rely on it!

Each animation needs to be defined with the @keyframes at-rule which is then called with the animation property
Before applying animations to HTML elements, you need to write animations using keyframes. Basically, keyframes are each intermediate step in animation. They are defined using percentages.
You can also use the keywords from and to instead of 0% and 100% respectively.

Read below blogs for complete understanding.
https://thoughtbot.com/blog/css-animation-for-beginners
https://marksheet.io/css-animations.html

transform

transform property defines how an element is transformed.

Transformation is an effect that is used to change the size, position, and shape.
Following is a list of 2D transforms methods:

• translate(x,y): It is used to transform the element along X-axis and Y-axis.
• translateX(n): It is used to transform the element along X-axis.
• translateY(n): It is used to transform the element along Y-axis.
• rotate(): It is used to rotate the element on the basis of an angle.
• scale(x,y): It is used to change the width and height of an element.
• scaleX(n): It is used to change the width of an element.
• scaleY(n): It is used to change the height of an element.
• skewX(): It specifies the skew transforms along with X-axis.
• skewY(): It specifies the skew transforms along with Y-axis.

shape-outside

Declares a shape around which text should be wrapped, with possible modifications from the shape-margin property. The shape defined by shape-outside and shape-margin changes the geometry of a float element’s float area.

By default, inline content wraps the margin box, but the shape-outside property allows to wrap around complex objects.

It accepts the following values:

Keyword values: none, margin-box, padding-box, border-box, padding-box
Function values: circle(), ellipse(), inset(), polygon()

 Firefox and IE still don’t have support for this property, and Safari supports it with the -webkit- prefix.

Background-blend-mode

background-blend-mode blends with its background-image and its background-color

CSS blend modes are an easy way to add image effects right in the browser. Because of this, the traditional way of editing and then saving photos from an image editing software solution is not always necessary. Designers spent countless hours adding effects to images with tools like Adobe Photoshop. You can also specify several blend modes, one per background.

• color
• color-burn
• color-dodge
• darken
• difference
• exclusion
• hard-light
• hue
• lighten
• luminosity
• multiply
• overlay
• saturation
• screen
• soft-light

calc()

calc() function let you perform a simple math operation. It is used on length value. The calc() function allows mathematical expressions with addition (+), subtraction (-), multiplication (*), and division (/) to be used.

calc() is especially useful when you need to add or subtract a length value from a percentage.

.container {
   padding:calc(5% - 20px)
}

var()

CSS var() function allows us to use CSS store CSS properties in variable and use as a variable.CSS variables can be defined at any point, and they are inherited to all the children of the DOM element they’re applied to\

html {
  --spacing: 20px;
}
.box {
  padding: var(--spacing); /* using --spacing variable*/
  margin: var(--spacing);
}

Here we defined a CSS var named --spacing and we assigned it a value of 20px. The variable is defined in the html an element so it will be available in our whole document.

CSS var must start with —

@supports

@supports is a CSS rule which gives you the ability to check is certain property supports on the browser.

It let you check for a property on a browser before using them

@supports ( column-count) {
  .box {
     column-count:3
  }
}            

@supports (image-rendering) {
  img {
    image-rendering: pixelated;
  }
}

column-count

CSS3’s column-count property makes it unbelievably easy to create completely responsive columns without adding any extra markup to your HTML. By the number of columns given, the browser will evenly distribute the element into a number of columns.

CSS column-count property values are

• auto: According to the column-width specified contents will be split.
• integer: It is a positive integer, it specifies the number of columns in which the contents should be split.

There are a number of other column-* properties:

column-gap: property specifies the size of gap between the columns
column-rule: is a vertical line drawn between the column visually separating them. It’s a shorthand for setting these 3 properties (it is very much like border-*).
column-rule-color: specifies the color of the line. The value can be a named color (red, green, transparent), hex, rgb/rgba, hsl/hsla color values.
column-rule-style: specifies the style of the line. It accepts the following values: none, hidden, dotted, dashed, solid, double, groove, ridge, inset, outset.
column-rule-width: specifies the width of the line and accepts named values (thin, medium, thick), px, em, initial, inherit and unset.

currentColor

CSS currentColor is exactly what it sounds like. It will take the elements’ current computed color value and allow other properties to use it.
The currentColor keyword matches the value of the color property for the current item. This allows you to use a color value for properties that do not receive it by default. Let’s see how to use currentColor property.

<div class="box">
  <p class="content">i am using  currentColor .</p>
</div>

.box{
  color:#a6a6a6;
  border:2px solid currentColor
}
content{
  color:currentColor /*inheriting fromparent*/
}

table-layout

The table-layout CSS property sets the algorithm used to layout <table> cells, rows, and columns. This property will make a table cells to be the same width

The main benefit of table-layout: fixed; is that the table renders much faster. On large tables, users will not see any part of the table until the browser has rendered the whole table. So, if you use table-layout: fixed, users will see the top of the table while the browser loads and renders the rest of the table. This gives the impression that the page loads a lot quicker!

It has the following property values.

• auto
• fixed
• initial

hyphens

The CSS hyphens property specifies whether or not characters that suggest hyphenation opportunities are allowed to be broken for text wrap.
These are the following properties value it accepts.

none - words are not broken at implied hyphenation opportunities.
manual - words are broken only where characters explicitly suggest hyphenation opportunities.
auto - let language-specific factors determine suggested hyphenation behavior.

There are two line break characters you can use:

&shy: - will let the browser know that it’s a place in the text where the hyphenation may be performed if necessary
&hyphen: - will render the hyphen even if the line is not broken