10 very good CSS skills collection and sharing

Here, clever use of CSS techniques allows you to get a good blog or template appearance without modifying HTML. I have collected some very useful CSS tips to make your blog design more stunning and cool.
When designing templates and blog themes, I often “Hit and Trial CSS” to see which color scheme and which CSS property combination can make the elements of the page more perfect. Oh, and the reason why I say “Hit and Trial CSS” is that I will try everything before I get the effect I am satisfied with. Among these different CSS properties, the ones I use the most are the ones listed here.

Ever since I started blogging, I have been exposed to CSS. I love design and I love CSS. Blogging has taught me PHP, CSS and even HTML. Here I have collected 10 great CSS tips that you can use on your blog or personal website. It can help you organize your blog elements nicely and make them look cool. Let's start our content below, I hope you like it.
1. Simple method to adjust the size of blog pictures

Copy code

The code is as follows:

content img {
height:auto;
width:500px;
}

This is the easiest and most effective way to resize the images on your blog. It sets the width of all images in the content to 500 pixels, and the height adapts to the width. I am now using this method to redefine the image size in this blog content.
2. IE HTML Hack

Copy code

The code is as follows:

div#content {width: 580px}
* html body div#content {width: 600px}

Add a * before the div so you can customize the special styles for IE.
3. CSS shadows

Copy code

The code is as follows:

shadow
-moz-box-shadow: 3px 3px 5px 6px #ccc;
-webkit-box-shadow: 3px 3px 5px 6px #ccc;
box-shadow: 3px 3px 5px 6px #ccc;
}

You can apply the above styles to block level elements or any class or tag wrapped by a div. You need to set the horizontal and vertical offsets, blur radius, and shadow fill color. You can see an example of this in the picture posted with this article.
4. CSS first word enlargement

Copy code

The code is as follows:

p:first-letter {
display: block;
float: left;
margin: 5px 5px 0 0;
color: red;
font-size: 1.4em;
background: #ddd;
font-family: Helvetica;
}

It's easy to define your first letter enlargement. Use the CSS first-letter property to automatically select the first letter of your blog. Then you can customize CSS to style the first letter, such as larger font size, italics, etc.
5. Flip images with CSS

Copy code

The code is as follows:

#content img {
-moz-transform: scaleX(-1);
-o-transform: scaleX(-1);
-webkit-transform: scaleX(-1);
transform: scaleX(-1);
filter: FlipH;
-ms-filter: "FlipH";
}

You can flip any image using the above CSS properties
6. Remove the clicked link box

Copy code

The code is as follows:

a {outline: none}
or
a {outline: 0}

You must have noticed that when you click on a link in some blogs, you see a dotted border around the link. You can remove these borders using the little CSS snippet above.
7. Use special fonts in CSS <br />You can use CSS to load special fonts. All you have to do is upload the font in TTF format to the server, and then import it on CSS using font rules.
8. Element transparency

Copy code

The code is as follows:

element {
filter:alpha(opacity=50);
-moz-opacity:0.5;
-khtml-opacity: 0.5;
opacity: 0.5;
}

Using the transparency property, you can make elements transparent on any browser. These properties work on all major browsers, even IE (PS: IE6 is skipped?...)
9. Use CSS to display the URL behind the link

Copy code

The code is as follows:

a:after{content:" (" attr(href) ") ";}

This will display the URL after the link anchor. You can also define it with font or other styles.
10. Customize special styles for handheld devices

Copy code

The code is as follows:

If your blog is not responsive or you want special styling when viewing it on a mobile phone, you can customize the CSS for the mobile version of your blog.

<<: A quick solution to the automatic line break problem of table header in responsive framework

>>: Differences between proxy_pass in two modules in nginx

CentOS 7 configuration Tomcat9+MySQL solution

10 very good CSS skills collection and sharing

CentOS 7 configuration Tomcat9+MySQL solution

Graphic tutorial on installing tomcat8 on centos7.X Linux system

How to solve the slow speed of MySQL Like fuzzy query

Screen command and usage in Linux

Docker advanced method of rapid expansion

Use HTML and CSS to create your own warm man "Dabai"

Use of LRU algorithm in Vue built-in component keep-alive

Correct steps to install Nginx in Linux

MySQL paging performance exploration

WeChat applet picker multi-column selector (mode = multiSelector)

Recommend

Linux system command notes

Detailed discussion on the issue of mysqldump data export

Pure JavaScript to implement the number guessing game

Six ways to increase your website speed

How to create a style guide for your website in web interface design (with pictures and text)

React implements the expansion and collapse function of complex search forms

WeChat applet date and time component (year, month, day, hour, and minute)

Solution to MySQL replication failure caused by disk fullness

How to check whether the ports of the local computer and the remote server are connected under Linux

Detailed explanation of docker command to backup linux system

Using JavaScript to implement carousel effects

JavaScript web page entry-level development detailed explanation

How to ensure the overall user experience

Summary of Mysql exists usage

When Navicat connects to MySQL, it reports 10060, 1045 errors and the location of my.ini