π¨π¨ Note: All the tips, tricks shared in this article are part of GitHub repository css tips tricks A handmade collection of pro css tips tricks for developers. Please checkout the repositiory and Give it a star if you find it useful π
1. Docs Layout
Create a responsive documentation-styled layout with only two lines of CSS.
.parent{
display: grid;
grid-template-columns: minmax(150px, 25%) 1fr;
}
2. The Custom Cursors
Checkout the github repository css tips tricks to learn more about it.
html{
cursor:url('no.png'), auto;
}
3. Fill Text With Images
h1{
background-image: url('images/flower.jpg');
background-clip: text;
color: transparent;
background-color: white;
}
Note: Always specify background-color
when using this technique as this will be used as a fallback value in case the image does not load for some reason.
4. Adding Stroke to Text
Make text more legible and visible using text-stroke
property it adds a stroke or outline to text.
/* π¨ Apply a 5px wide crimson text stroke to h1 elements */
h1 {
-webkit-text-stroke: 5px crimson;
text-stroke: 5px crimson;
}
5. Paused Pseudo Class
Use :paused
selector to style media elements when in paused state likewise :paused
we also have :playing
.
/* π’ currently, only supported in Safari */
video:paused {
opacity: 0.6;
}
6. Emphasing Text
Use text-emphasis
property to apply emphasis marks to text elements.You can specify any string including emojis as its value.
h1 {
text-emphasis: "β°";
}
7. Style Drop Caps
Avoid unnecessary spans and use pseudo elements instead to style your content likewise first-letter
pseudo-element we also have first-line
pseudo-element.
h1::first-letter{
font-size: 2rem;
color:#ff8A00;
}
8. Fallback values for Variables
/* π¨ crimson color will be applied as var(--black) is not defined */
:root {
--orange: orange;
--coral: coral;
}
h1 {
color: var(--black, crimson);
}
9. Change Writing Mode
You can use writing mode property to specify how text should be laid out on your website i.e vertically or horizontally.
<h1>Cakes & Bakes</h1>
/* π‘ specifies the text layout direction to sideways-lr */
h1 {
writing-mode: sideways-lr;
}
10. Rainbow Animation
Creates a continuously looping color animation for elements to grab user attention. Give a read to css tips tricks repository to learn when to use prefer-reduced-motion
media feature
button{
animation: rainbow-animation 200ms linear infinite;
}
@keyframes rainbow-animation {
to{
filter: hue-rotate(0deg);
}
from{
filter: hue-rotate(360deg);
}
}
11. Master Web Development
Subscribe to our YouTube channel to take your web-development skills to the next level. One of the recent video series goes over creating the following open source portfolio template.
12. Zooming on Hover
/* π· Define the height and width of the image container & hide overflow */
.img-container {
height: 250px; width: 250px; overflow: hidden;
}
/* πΌοΈ Make the image inside the container fill the container */
.img-container img {
height: 100%; width: 100%; object-fit: cover;
transition: transform 200m ease-in;
}
img:hover{
transform: scale(1.2);
}
13. Attribute Selector
Select HTML elements based on attributes using the attribute selector.
<a href="">HTML</a>
<a>CSS</a>
<a href="">JavaScript</a>
/* π targets all a elements that have a href attribute */
a[href] {
color: crimson;
}
14. Clipping Elements
Use the clip-path
property, to create interesting visual effects, such as clipping an element to a custom shape like a triangle or hexagon.
div {
height: 150px;
width: 150px;
background-color: crimson;
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}
15. Detect Properties Support
Use CSS @support rule
to detect support for CSS features directly in your CSS. Checkout the css tips tricks repository to learn more about feature queries.
@supports (accent-color: #74992e) {
/* code that will run if the property is supported */
blockquote {
color: crimson;
}
}
16. CSS Nesting
The CSS working group has been working on figuring out how to add nesting to CSS. With nesting, you'll be able to write CSS that is more intuitive, more organized, and more efficient.
<header class="header">
<p class="text">Lorem ipsum, dolor</p>
</header>
/* π You can try CSS nesting now in Safari Technology Preview*/
.header{
background-color: salmon;
.text{
font-size: 18px;
}
}
17. The Clamp Function
Use the clamp()
function for responsive and fluid typography.
/* Syntax: clamp(minimum, preferred, maximum) */
h1{
font-size: clamp(2.25rem,6vw,4rem);
}
18. Styling Optional Fields
You can style form fields like input, select and textarea that dose not have a required attribute on them using the :optional
pseudo class.
/* Selects all optional form fields on the page */
*:optional{
background-color: green;
}
19. Word Spacing Property
Use word-spacing
property to specify length of white space between words.
p {
word-spacing: 1.245rem;
}
20. Create Gradient Shadows
This is how you can create gradient shadows for an exclusive user experience.
:root{
--gradient: linear-gradient(to bottom right, crimson, coral);
}
div {
height: 200px;
width: 200px;
background-image: var(--gradient);
border-radius: 1rem;
position: relative;
}
div::after {
content: "";
position: absolute;
inset: 0;
background-image: var(--gradient);
border-radius: inherit;
filter: blur(25px) brightness(1.5);
transform: translateY(15%) scale(0.95);
z-index: -1;
}
21. Change Caption Side
Use the caption-side
property to place the table caption (table title) on a specified side of the table.
22. Creating Text Columns
Craft nice column layouts for text elements using column properties.
/* ποΈ divide the content of the "p" element into 3 columns */
p{
column-count: 3;
column-gap: 4.45rem;
column-rule: 2px dotted crimson;
}
I hope you enjoyed reading this article. Please checkout the GitHub repository css tips tricks to learn more professional css tips, tricks and don't forget to give the repository a starβ This will help other peoples find this repository.
You can show your support by following me on my GitHub account. Thanks and Happy coding β€οΈ
Top comments (22)
Thanks, But you missed centering a div ππ
Thanks for pointing out! Actually, I've already included five different ways to center a div in my GitHub repository css tips tricks
sure
I think that's need a whole article π
Yeah Probablyππ
Great thank you very much
Good tips, I've been practicing CSS a little lately, I'll have these in mind π
Thanks, Louis! Please checkout the GitHub repository css tips tricks and consider giving it a star if you find it useful.
Nice, I'll check it out!
Very useful CSS tips. Thank you for this.
thank you for share
Awesome post!
Thanks for sharing. You make checking out the GitHub CSS tips tricks repository an interesting visit before the day is out.
Great read! A few little gems I'd never heard of there
great content thanks bro
Thanks for the useful information!!! Thank youβ€