Sort articles by: Date | Most Rates | Most Views | Comments | Alphabet

Talk about meta tags

Author: bamboo06 on 9-04-2017, 00:20, views: 503

5 The Meta tag is an auxiliary tag for the HTML language head area, which is located between the head tag and the title tag in the head of the HTML document, which provides information that is not visible to the user. It can be used for browsers (how to display content or reload pages), search engines (keywords), or other web services.
I am now front-end page development often used meta tag content compiled into the mobile side of the web development meta information for the needs of access.
Talk about meta tags

Category: CSS / HTML5

 

Use pure CSS to beautify radio and checkbox

Author: bamboo06 on 14-12-2016, 00:48, views: 532

2 Radio box and checkbox need to beautify it? Of course, the original style of the same century has been unable to meet the needs of our customers. Form a lot of controls need to beautify, we have to do with javascript landscaping, but also directly to the use of CSS to beautify, and today I introduce you to use pure CSS to achieve radio and checkbox landscaping.
Use pure CSS to beautify radio and checkbox

We know that many of the ways to use JS to beautify the form controls are not very satisfactory, with the introduction of js and css, and some even use pictures and font icons, but also rely on jQuery, and complex, poor maintainability.

Category: CSS / Plugins

 

Small Font Icon Application

Author: bamboo06 on 4-12-2016, 01:32, views: 529

5 We know that loading small icons on the page there are many ways, such as we use more is css sprite background image positioning, is to integrate a lot of small icons to a large map, and then use CSS to locate the background. There is also a more modern way is to use font font icon, which uses the @ font-face principle to load the icon font library, and then call the icon.
Small Font  Icon Application

Use css sprite is very convenient way, you can have a lot of colorful icons, and compatibility is good, but the drawback is that the icon can not be scaled, or the zoom will be distorted, another maintenance is not convenient, modify an icon on the whole picture to modify , And the positioning of pixels need to use tools such as PS to determine the location.

Category: Javascript / CSS / Plugins

 

Large image loading optimization solution

Author: bamboo06 on 4-12-2016, 00:35, views: 510

7 We browse the page to load a large size picture, the picture size is relatively large, we will see the browser to load the picture from top to bottom when the picture will be displayed until the picture is complete on the page, so that the image from the blank area To fully loaded process is more unexpected, the user experience is relatively poor.
Large image loading optimization solution

We use the solution is to first load a small thumbnail, it may only 1K or so, and according to the required size of fuzzy display, wait until the large size of the picture to download a good and then complete the show large picture. This gives the user the feeling is to load the fuzzy picture, and then become clear picture, picture loading process fluently, greatly improve the user experience.

Category: Javascript / CSS / Plugins

 

You can enter or drop-down the selected select

Author: bamboo06 on 22-11-2016, 00:35, views: 642

12 We know that the general select drop-down box is only selected, can not be used to enter the content. Sometimes we will encounter the drop-down box does not have to select the information item or drop-down options for a long time, we can let select into text, allowing users to enter the desired content, but also can be included in the importation of key words Also listed for quick selection.
You can enter or drop-down the selected select

Category: Javascript / CSS / Plugins

 

Use CSS3 to realize breadcrumb navigation and multi-step instructions

Author: bamboo06 on 22-11-2016, 00:11, views: 608

4 Breadcrumbs are used to navigate the site where the current page is located. The breadcrumbs represent site classification or directory hierarchy relationships, and multi-step instructions are often used in some step-by-step process wizards, such as step- Goods Order Process. Today we are using CSS to make breadcrumbs and multi-step instructional applications.
Use CSS3 to realize breadcrumb navigation and multi-step instructions

Category: CSS / Plugins

 

Use CSS3 to realize single-page vertical fixed navigation

Author: bamboo06 on 6-10-2016, 11:56, views: 652

2 More and more developers like to design a single page, especially a product introduction page, with each important part (node) of a page associated with a simple navigation bar. In this example, a page consists of several important nodes, the side of the page will show a number of simple vertical navigation far point, slide the dot will display the corresponding part of the node name, click on the page will scroll to the corresponding part of the node, While the navigation bar position is fixed.
Use CSS3 to realize single-page vertical fixed navigation

When the screen is small enough (such as mobile devices), will display an icon in the lower right corner of the screen, touch icon, it will expand the navigation menu, click on the menu page will scroll to the corresponding node, the effect is very cool.

Category: CSS

 

Making use of jQuery and CSS3 for responsive horizontal time axis

Author: bamboo06 on 13-08-2016, 02:16, views: 682

4 We often see a lot of progress in record events to the vertical axis, and a friend asked me asked to share the level of the timeline, in fact, the difficulty level of the timeline is adaptive screen size. Well, today I'm going to share with you is a responsive support, support touch gestures sliding horizontal time axis.
Making use of jQuery and CSS3 for responsive horizontal time axis

Category: Javascript / CSS

 

Fixed background and scrolling page effect with CSS

Author: bamboo06 on 13-08-2016, 01:54, views: 512

1 How to create a just simply and none requiring javascript and CSS property of background-attachment can be realized fixed page backgrounds and scrolling effect. We see that there are many project sites use parallax effect, parallax is generated by the dynamic changes and the background image and js script, but today we only need CSS.
Fixed background and scrolling page effect with CSS

HTML structure is very simple, a background image is fixed placement class .cd-fixed-bg div element for a class of .cd-scrolling-bg div element portion for scrolling. We can place multiple .cd-fixed-bg and .cd-scrolling-bg group.

Category: CSS

 

Making use of Animate.css for stunning CSS3 animation

Author: bamboo06 on 1-08-2016, 01:03, views: 478

2 Animate.css is a super CSS3 animation library, it is simple to use, only needing to join class effect is related to the corresponding page elements, you can achieve the flip, slide, rotation and so on complex stunning cross browser animation effects, which makes development and creating the page animation become very simple.
Making use of Animate.css for stunning CSS3 animation

Category: Javascript / CSS

 
Previous Next