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:<link type="text/css" rel="stylesheet" href="handheldstyle.css" media="handheld"> 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
Recommend
Mysql example of querying all lower-level multi-level sub-departments based on a certain department ID
Simulation tables and data scripts Copy the follo...
A brief introduction to mysql mycat middleware
1. What is mycat A completely open source large d...
How to block IP and IP range in Nginx
Written in front Nginx is not just a reverse prox...
Explain TypeScript mapped types and better literal type inference
Table of contents Overview Using mapped types to ...
Detailed explanation of Apache website service configuration based on Linux
As an open source software, Apache is one of the ...
How to configure nginx to limit the access frequency of the same IP
1. Add the following code to http{} in nginx.conf...
Detailed tutorial on Docker pulling Oracle 11g image configuration
Without further ado Start recording docker pullin...
Detailed tutorial on how to use docker to build a laravel development environment in win10 home version
operating system: Win10 Home Edition Install Dock...
Detailed explanation of root directory settings in nginx.conf
There are always some problems when configuring n...
Convert XHTML CSS pages to printer pages
<br />In the past, creating a printer-friend...
MySQL 8.0.16 installation and configuration tutorial under Windows 10
This article shares with you the graphic tutorial...
Summary of three ways to implement ranking in MySQL without using order by
Assuming business: View the salary information of...
Detailed explanation of Vue's keyboard events
Table of contents Common key aliases Key without ...
Vue implements two routing permission control methods
Table of contents Method 1: Routing meta informat...
Pure CSS to achieve the text icon function by taking the first character of the string
How to implement text icons through CSS /*icon st...