An Interest In:
Web News this Week
- April 2, 2024
- April 1, 2024
- March 31, 2024
- March 30, 2024
- March 29, 2024
- March 28, 2024
- March 27, 2024
Some of Our Sources
- Simplebits
- TutsPlus - Code
- Spoon Graphics
- Smashing Apps
- Six Revisions
- Vandelay Design
- Noupe
- Fudge Graphics
- Wal You
- Web Resource Source
Help Webnuz
Referal links:
Web Design Mastery: 7 Cool CSS Properties to Help You Stand Out
CSS is the backbone of web designing and front-end development. A little knowledge of CSS properties will help you take your web designing skills to the next level. In this article, we will discuss some of the coolest CSS properties that will make you a pro at web designing.
1. mask-image
The mask property in CSS is used to hide an element using the clipping or masking the image at specific points. Masking defines how to use an image or the graphical element as a luminance or alpha mask. It is a graphical operation that can fully or partially hide the portions of an element or object.
Using masking, it is possible to show or hide the parts of an image with different opacity levels. In CSS, the masking is achieved by using the mask-image property, and we have to provide an image as the mask.
The mask-image property works in a similar way to the background-image property. Use a url() value to pass in an image. Your mask image needs to have a transparent or semi-transparent area.
Here are two examples of interesting effects that can be accomplished with masking using gradients:
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .mask1 { -webkit-mask-image: radial-gradient(circle at 50% 60%, black 50%, rgba(0, 0, 0, 0.6) 50%); mask-image: radial-gradient(circle at 50% 60%, black 50%, rgba(0, 0, 0, 0.6) 50%); } .mask2 { -webkit-mask-image: radial-gradient(ellipse 90% 80% at 48% 78%, black 40%, transparent 50%); mask-image: radial-gradient(ellipse 90% 80% at 48% 78%, black 40%, transparent 50%); } </style></head><body> <img class="mask1" src="image.jpg" width="400" height="400" alt="Image"/> <img class="mask2" src="image.jpg" width="400" height="400" alt="Image"/></body></html>Demo:
2. clip-path
The clip-path property allows you to make complex shapes in CSS by clipping an element to a basic shape (circle, ellipse, polygon, or inset), or to an SVG source.
CSS Animations and transitions are possible with two or more clip-path shapes with the same number of points.
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .mask3{ clip-path: polygon(50% 0%, 0% 100%, 100% 100%); } </style></head><body> <img class="mask3" src="image.jpg" width="400" height="400" alt="Image"/></body></html>
3. backface-visibility
The backface-visibility property defines whether or not an element should be visible when not facing the screen.
This property is useful when an element is rotated, and you do not want to see its backside.
To better understand this property, view the following example.
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .flip { -webkit-transform: rotateY(180deg); -moz-transform: rotateY(180deg); -ms-transform: rotateY(180deg); -webkit-backface-visibility: visible; -moz-backface-visibility: visible; -ms-backface-visibility: visible; } .flip.hide-back { -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -ms-backface-visibility: hidden; } </style></head><body> <div class="flip">text</div> <!-- U NO SEE! --> <div class="flip hide-back">text</div></body></html>
4. background-blend-mode
The background-blend-mode property defines the blending mode of each background layer (color and/or image). To use it, you need to specify the blending mode of a background-image.
<!DOCTYPE html><html><head><style>#myDIV { width: 400px; height: 400px; background-repeat: no-repeat, repeat; background-image: url("img_tree.gif"), url("paper.gif"); background-blend-mode: lighten;}</style></head><body><h1>The background-blend-mode Property</h1><div id="myDIV"></div><p><b>Note:</b> Edge prior 79 do not support the background-blend-mode property.</p></body></html>
5. resize
With the CSS resize property, we can resize an element horizontally, vertically, or in both directions.
We can set four different values to resize the property:
- none Element cannot be resized. This is the default value for most of the elements (except some elements like text area).
- horizontal Element can be resized in the horizontal direction.
- vertical Element can be resized in the vertical direction.
- both Element can be resized in the horizontal and vertical direction.Lets create four p elements, and set height to 100px and width to 200px. Then, apply four resize properties to four p and test how it works.
<html> <head> </head> <style> .wrapper { height: 100vh; display: flex; align-items: center; justify-content: center;}p { width: 200px; height: 100px; overflow: auto; margin-right: 10px; display: flex; align-items: center; justify-content: center;}.resize { background: orange; resize: both;}.resize-horizontal { background: #fcba03; resize: horizontal;}.resize-vertical { background: pink; resize: vertical;}.resize-none { background: tomato; resize: none;} </style> <body> <div class="wrapper"> <p class="resize-none"> resize: none </p> <p class="resize-horizontal"> resize: horizontal </p> <p class="resize-vertical"> resize: vertical </p> <p class="resize"> resize: both </p></div> </body></html>Demo:
6. scroll-snap-type
The Scroll Snap type property is an inbuilt property in the Scroll Snap module. Without the Scroll Snap module, the image gallery will look ridiculous. Before the Scroll Snap module, this effect can be achieved by JavaScript but during this days Scroll Snap with the CSS can be achieved. This property is useful to stop scrolling at some specific point of the page. You can use this property in the gallery section of your web-page. It will give you the full control of the scrolling.
Syntax:
scroll-snap-type: none | [ x | y | block | inline | both ] [ mandatory | proximity ]7. writing-mode
The writing-mode property changes the alignment of the text so that it can be read from top to bottom or from left to right, depending on the language. For example, lets say we want to add some text that is read from top to bottom and from right to left, like this:
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> p { font-family: Georgia, serif; font-size: 18px; } .vertical-rl { writing-mode: vertical-rl; color: #0074d9; display: inline-block; } </style></head><body> <p>This is text that needs to be read from top to bottom, and from right to left:</p> <p class="vertical-rl">This is text that needs to be read from top to bottom, and from right to left.</p></body></html>Demo:
Summary
In conclusion, mastering the art of web design is not an impossible task. With the help of these 7 cool CSS properties, you can take your design skills to the next level and stand out in the competitive world of web design. These properties are essential for any web designer looking to elevate their game. So, go forth and experiment with these tools, and see how they can help you create visually stunning and engaging websites that will grab the attention of your audience.
Original Link: https://dev.to/devland/web-design-mastery-7-cool-css-properties-to-help-you-stand-out-4d54
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To