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

Vue implements a complete process record of a single file component

10 very good CSS skills collection and sharing

Vue implements a complete process record of a single file component

Each time Docker starts a container, the IP and hosts specified operations

How to clean up data in MySQL online database

An example of using Lvs+Nginx cluster to build a high-concurrency architecture

Summary of MySql import and export methods using mysqldump

Solution to VMware virtual machine no network

MySQL lock control concurrency method

MySQL Failover Notes: Application-Aware Design Detailed Explanation

Summary of 7 types of logs in MySQL

Detailed explanation of .bash_profile file in Linux system

Recommend

Detailed explanation of Linux mpstat command usage

mysql8.0.23 msi installation super detailed tutorial

How to implement dual-machine master and backup with Nginx+Keepalived

Vue's various implementation methods for modifying parent component props through child components

Detailed explanation of how to synchronize data from MySQL to Elasticsearch

Example code for setting hot links and coordinate values for web images

MySQL 5.7.20 compressed version download and installation simple tutorial

How the Linux kernel breaks into the process address space and modifies the process memory

javascript implements web version of pinball game

The principle and configuration of Nginx load balancing and dynamic and static separation

Example analysis to fix problems in historical Linux images

Detailed process of FastAPI deployment on Docker

WeChat applet implements a simple calculator

Explaining immutable values in React

Analysis and solution of abnormal problem of loading jar in tomcat