CSS Posts

Media queries allow you to customize the presentation of your web pages for a specific range of devices like mobile, phone, tablets, desktops, etc. without any change in markups.

Syntax

@media Rule

The @media rule is used to apply a different set of styles for different Media/devices through the use of Media Queries.

Parenthesis

We set the condition inside the parenthesis.

If I want the background color to be changed in the smaller screen, I can set the condition inside parenthesis.

Media Types

If we don't apply a media type, the @media rule selects all types of devices by default.

There are many kinds of devices but we can group them into 4 categories:

all - for all media types print - for printers screen - for computer screens, tablets and smart-phones speech - for screen readers that "read" the page out loud

Breakpoints

Breakpoints are points where the website content responds according to the device width.

This is how the code works

when the screen is 992px or less, the background color is changed to blue from red

some common breakpoints for widths of devices:

• 320px-480px: Mobile devices
• 481-768px: iPads, Tablets
• 769px-1024px: Small Screens, Laptops
• 1025px - 1200px: Desktops, Large Screens
• 1201px and more: Extra Large Screens , TV

In HTML and CSS, an attribute selector is used to select any element with a specific attribute or value. This is a great way to style HTML elements by grouping them based on some specific features, and the feature selector will select elements with similar elements.

In CSS LifeStyle Example: We know that styling HTML elements with their tag names, class names, ID names, etc.
This all will apply the changes to all tags or all classes or all ID names within the page. But if I have a situation where I want to apply styles to a tag name but only a few of them we just name their attribute in the indexing bracket. Therefore that it can only apply those changes to matching tag name and attribute name matching elements.

Here are 7 CSS Attribute Selector Syntax:

• [attribute]
• [attribute=value]
• [attribute~=value]
• [attribute|=value]
• [attribute^=value]
• [attribute$=value]
• [attribute*=value]

1) [attribute] Selector only used to select HTML elements with the required attribute.

// This will color the tag with a title attribute.

a[title] { 

     color: yellow;
}

<a href=”” title=””>

2) [attribute=value] Selector used to select HTML elements with required attribute and value.

// This is used to select HTML elements with the required target and _blank.

a[target=”_blank”] { 

   color: yellow;

}

<a href=”” target=”_blank”>

3) [attribute~=”value”] Selector used to select HTML elements with required attribute value contains a given word anywhere in the selector.

// This will color the tag with title attribute value as a para word.

[title~=para] { 
   color: yellow;

}

<p title=”hello_para”/> 
<p  title=”_blank_para”>

4) [attribute|=”value”] Selector used to select HTML elements whose attribute value starting with specified value.

//This will color the tag with class attribute value as starting with the specified value
.

[class!=mango] { 
color: blue;

}

<p class=”mango_yellow”/> 
<p class=”” title=”mango_red”>

5) [attribute^=”value”] Selector used to select HTML elements whose attribute value begins with the specified value.

// This will color the tag with class attribute value as start with the specified string
.

[class!=”there”] { 
color: blue;

}

<p class=”there_yellow” />
<p class=”” title=”there_red” />

6) [attribute$=”value”] Selector used to select HTML elements whose attribute value ends with the specified value.

//This will color the tag with class attribute value as ends with the hello string
.

[class$=”hello”] { 
color: blue;

}

<p class=”hi_there_hello” /> 
<p class=”I_am_hello” />

7) *[attribute=”value”] Selector** used to select HTML elements whose attribute value contains specified value anywhere in the attribute value.

//This will color the tag with class attribute contains specified value anywhere
.

[class*=”am”] { 
color: blue;

}

<p class=”gaming”/> 
<p class=”games”/>

In this blog, we will learn how to use clip-path and also cover inset(), polygon(), circle(), and ellipse() method .

What is CSS Clip-path?

Clip-path is a CSS property that creates a clipping field that sets which part of a component should be shown and which other parts are hidden. The inside of the clipped area is shown, while the outside is hidden.

CSS Property clip-path creates shapes by clipping an element. It clips some regions of an element to create new shapes. The most used method for clip-path is polygon(), circle(), and ellipse().

CSS clip-path() accepted values

These shapes can be created using basic shape functions. The basic shape functions are listed below:-

• inset()
• polygon()
• circle()
• ellipse()

inset()

The inset () function allows you to clip a component from around the coordinate system. The result is a visible rectangle. you can assign values to the margin or padding and border-radius property. but two values are limited in rounded corners. The first value is assigned to the top left corner and the bottom right corner and the second value is assigned to the top right corner and the bottom left corner.

polygon()

To design or clip the rectangular parts of the viewport, we use the polygon () method. Polygon is the most commonly used method in clip-path. We can construct any shape using the polygon method.

Example

circle()

The below image is created by using the clip-path method circle(50% at 50% 50%). In the circle(val1 at var2 var3), val1 is the size of the radius of the circle, and val2 and val3 are the positions of the center. val2 represents the position of the center from the left of the viewport, val2 represents the position of the center from the top of the viewport.

ellipse()

Below image is created using clip-path method ellipse(25% 40% at 50% 50%). An ellipse(val1 val2 at val3 val4) val1 and val2 are the horizontal and vertical distance from the center. val3 and val4 is the position of center.

Resources

I recommend you visit this link to play with the clip-path CSS property. You will see different types of shapes from this link. It's an imaginative place. You can customize your shape.