CSS can get tricky, and you should too.🤫
Curve Text Around a Floating Image
shape-outside
is a CSS property that allows geometric shapes to be set in order to create a text region that can float around.
.circle{
width: 100px;
float: left;
shape-outside: circle(50%);
}
Easily resize images to fit in
You often get into a pinch where images have to match a given width, while proportionally scaling. An easy way to do this is to use the maximum width to handle it. Here is an example of this,
img {
max-width:100%;
height:auto;
}
Absolute positioning
If you want to control where an item is always positioned on your web, absolute positioning is the key to this.
position:absolute;
Use SVG for icons and logos
All modern browsers and sizes are supportive of SVG for all resolution styles. There is no need to use.jpg or.gif images for logos or icons. The following code is the CSS code for displaying a website logo,
#logo {
display: block;
text-indent: -9999px;
width: 100px;
height: 80px;
background: url(logo.svg);
background-size: 100px 80px;
}
Overriding all styles
If you want to override a different CSS style for a specific element, use! Important after your css theme. For a particular region of my web , for example, I would use the following CSS if I wanted the H2 headers to be red, not blue.
.section h2 { color:red !important; }
Vertical alignment
The trick is to keep the menu height and the text line height same.
.nav li{
line-height:40px;
height:40px;
}
Hover
This can be used for buttons , text links, your site bock sections, icons, etc. If you want to change colors while someone is hanging over your keyboard, use the same CSS, just add: hover and change style.
.a h2{
font-size:42px;
color:#000;
font-weight:600;
}
.a h2:hover{
color:#f00;
}
Apply CSS to multiple classes, or selectors
Only claim that all the photos, the blog and the sidebar have the same boundary. You need not write the exact same CSS 3 times. List the items separated by commas.
.blog, img, .sidebar {
border: 1px solid #000;
}
Before
This CSS is a selector that you can pick a CSS object and insert content in front of each element with a particular class. Let's assume that before any H2 tag you had a website you needed unique texts.
h2:before {
content: "Continue: ";
<span class="Apple-converted-space"> color: #F00;</span>
}
After
You can use :after
to insert content globally on specific elements
p:after{
content: " -Read more… ";
color:#f00;
}
Drop caps
That 1st, big letter really catches your attention. There is an simple way to construct a drop cap in css, and it's by using the pseudo element: :first letter.
a:first-letter{
display:block;
float:left;
margin:5px;
color:#f00;
font-size:500%;
}
Force text to be all caps, all lowercase, or capitalized
h2 {
text-transform: uppercase;
}
h2 {
text-transform: lowercase;
}
h2 {
text-transform: capitalize;
}
Links
It shows visitors to the website where they've already been on your site, and where they've yet to discover.
a:link { color: blue; }
a:visited { color: purple; }
What is your opinion here? Share your thoughts in the comments :)
Top comments (4)
Could have used some example images(maybe)
Yeah I might do that later 😴🥱
Thank you! This is such a useful post (I've bookmarked it as I tend to search for these things all the time!) :-)
Thank you ❤️