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

10 very good CSS skills collection and sharing

How to build svn server in linux

MySQL commonly used SQL and commands from entry to deleting database and running away

24 Practical JavaScript Development Tips

JavaScript to implement a simple shopping form

Docker uses a single image to map to multiple ports

Detailed tutorial on installing Docker on CentOS 8.4

SQL function to merge a field together

Example usage of Linux compression file command zip

A brief introduction to VUE uni-app core knowledge

Achieve 3D flip effect with pure CSS3 in a few simple steps

Recommend

HTML Tutorial: HTML horizontal line segment

Analysis of the problems and solutions encountered in importing large amounts of data into MySQL

How to implement blank space in Taobao with CSS3

Introduction to generating Kubernetes certificates using OpenSSL

Examples of optimistic locking and pessimistic locking in MySQL

Solution to the problem of not being able to obtain the hostname of the host in the docker container

Teach you how to implement Vue3 Reactivity

Vue implements picture verification code when logging in

Application scenarios and design methods of MySQL table and database sharding

CSS implements 0.5px lines to solve mobile compatibility issues (recommended)

HTML table_Powernode Java Academy

In-depth explanation of MySQL common index and unique index

Detailed installation and use tutorial of mysql 8.0.15 under windows

mysql5.7.21 utf8 encoding problem and solution in Mac environment

React+Amap obtains latitude and longitude in real time and locates the address