» » page 2

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

You can enter or drop-down the selected select

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

21 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: 6512

8 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: 6846

19 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: 7316

11 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: 7556

7 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: 6736

11 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

 

Beautiful page transition animation

Author: bamboo06 on 23-06-2016, 00:03, views: 1688

15 By clicking the menu on side of the page it is loaded along with the corresponding slide transition animations, but also with the progress bar effect. Of course, the page loaded is driven by Ajax, the entire loading process of transition is very smooth, with very good user experience.
Beautiful page transition animation

HTML structure, .cd-main body of the page contains content, .cd-side-navigation contains the side navigation bar, # cd-loading-bar is used to make a progress bar with animation.

Category: Javascript / CSS

 

Pure CSS3 to realize rotation effect of icon

Author: bamboo06 on 17-02-2016, 00:44, views: 12785

76 CSS3 has a transform, which can make the target object deformation, transformation, change. Applied to the need to convert the angle, changing the size and other scenes, such as icons rotate, zoom in and out the background, etc., in short, transform is deformed, change the meaning, it belongs to the advanced technology of CSS3.
Pure CSS3 to realize rotation effect of icon

Category: CSS

 

Pure CSS3 to achieve cool mouseover effect

Author: bamboo06 on 25-11-2015, 00:50, views: 1781

2 In this paper, without the need to introduce any javascript code that uses only pure CSS3 and HTML to realize cool mouseover effect. When the mouse hovers over the target element, it can achieve a common line change, flip, zoom, slide animation, etc. effect.
Pure CSS3 to achieve cool mouseover effect

We put a picture in .he_border1, and list caption information.

Category: CSS / HTML5

 

Achieve responsive data table by CSS3

Author: bamboo06 on 24-11-2015, 00:48, views: 1494

1 Designing responsive page, the hardest part is processing table, data table design as an indispensable element, plays an important role in the data application projects, but to get a table really a little trouble to adapt to various screen . This article will use examples to demonstrate how to use CSS3 to achieve responsive data form.
Achieve responsive data table by CSS3

When the screen is small enough (such as mobile phone screen) that is less than the minimum width of the table, if not responsive handling, it will scroll horizontally, you need to manually move the magnified portion of the screen to see beyond such experience is poor. Our solution is to use CSSmedia queries to detect screen size, when the screen size is small enough, re-layout table form.

Category: CSS / HTML5