Yukiugk

googletag.cmd.push(function() { googletag.display('div-gpt-ad-1422003450156-2'); }); CSS User Interface ❮ Previous Next ❯ CSS User Interface In this chapter you will learn about the following CSS user interface properties: resize outline-offset Browser Support The numbers in the table specify the first browser version that fully supports the property. Numbers followed by -webkit- or -moz- specify the first version that worked with a prefix. Property resize 4.0 Not supported 5.0 4.0 -moz- 4.0 15.0 outline-offset 4.0 Not supported 5.0 4.0 -moz- 4.0 9.5 CSS Resizing The resize property specifies if (and how) an element should be resizable by the user. This div element is resizable by the user! To resize: Click and drag the bottom right corner of this div element. Note: Internet Explorer does not support the resize property. The following exampl...

<!-- main_leaderboard, all: [728,90][970,90][320,50][468,60] --> CSS Multiple Columns ❮ Previous Next ❯ CSS Multi-column Layout The CSS multi-column layout allows easy definition of multiple columns of text - just like in newspapers: Daily Ping Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Browser Support The numbers in the tab...

googletag.cmd.push(function() { googletag.display('div-gpt-ad-1422003450156-2'); }); CSS Pagination Examples ❮ Previous Next ❯ Learn how to create a responsive pagination using CSS. Simple Pagination If you have a website with lots of pages, you may wish to add some sort of pagination to each page: « 1 2 3 4 5 6 » ❮     ❯ Example .pagination {     display: inline-block; } .pagination a {     color: black;     float: left;     padding: 8px 16px;     text-decoration: none; } Try it Yourself » Active and Hoverable Pagination « 1 2 3 4 5 6 7 » Highlight the current page with an .active class, and use the :hover selector to change the color of each page link when moving the mouse over them: Example .pagination a.active {     background-color: #4CAF50;     color: white; } .pagination a:hover:not(.active) {background-color: #ddd;} Try it Yourself » Rounded Active and Hoverable Buttons « 1 2 ...

<!-- main_leaderboard, all: [728,90][970,90][320,50][468,60] --> CSS Buttons ❮ Previous Next ❯ Learn how to style buttons using CSS. Basic Button Styling Default Button CSS Button Example .button {     background-color: #4CAF50; /* Green */     border: none;     color: white;     padding: 15px 32px;     text-align: center;     text-decoration: none;     display: inline-block;     font-size: 16px; } Try it Yourself » Button Colors Green Blue Red Gray Black Use the background-color property to change the background color of a button: Example .button1 {background-color: #4CAF50;} /* Green */ .button2 {background-color: #008CBA;} /* Blue */ .button3 {background-color: #f44336;} /* Red */ .button4 {background-color: #e7e7e7; color: black;} /* Gray */ .button5 {background-color: #555555;} /* Black */ Try it Yourself » <!-- mid_content, all: [300,250][336,280][728,90][970,250][970,90][320,50][468,60] --> Button Sizes 10px 12px...

<!-- main_leaderboard, all: [728,90][970,90][320,50][468,60] --> CSS The object-fit Property ❮ Previous Next ❯ The CSS object-fit property is used to specify how an <img> or <video> should be resized to fit its container. Browser Support The numbers in the table specify the first browser version that fully supports the property. Property object-fit 31.0 16.0 36.0 7.1 19.0 The CSS object-fit Property The CSS object-fit property is used to specify how an <img> or <video> should be resized to fit its container. This property tells the content to fill the container in a variety of ways; such as "preserve that aspect ratio" or "stretch up and take up as much space as possible". Look at the following image from Paris, which is 400x300 pixels: However, if we style the image above to be 200x400 pixels, it will look like this: Example img {...

googletag.cmd.push(function() { googletag.display('div-gpt-ad-1422003450156-2'); }); CSS Styling Images ❮ Previous Next ❯ Learn how to style images using CSS. Rounded Images Use the border-radius property to create rounded images: Example Rounded Image: img {     border-radius: 8px; } Try it Yourself » Example Circled Image: img {     border-radius: 50%; } Try it Yourself » Thumbnail Images Use the border property to create thumbnail images. Thumbnail Image: Example img {     border: 1px solid #ddd;     border-radius: 4px;     padding: 5px;     width: 150px; } <img src="paris.jpg" alt="Paris"> Try it Yourself » Thumbnail Image as Link: Example img {     border: 1px solid #ddd;     border-radius: 4px;     padding: 5px;     width: 150px; } img:hover {     box-shadow: 0 0 2px 1px rgba(0, 140, 186, 0.5); } <a href="paris.jpg">   <img src="paris.jpg" alt="...

googletag.cmd.push(function() { googletag.display('div-gpt-ad-1422003450156-2'); }); CSS Tooltip ❮ Previous Next ❯ Create tooltips with CSS. Demo: Tooltip Examples A tooltip is often used to specify extra information about something when the user moves the mouse pointer over an element: Top Tooltip text Right Tooltip text Bottom Tooltip text Left Tooltip text Basic Tooltip Create a tooltip that appears when the user moves the mouse over an element: Example <style> /* Tooltip container */ .tooltip {     position: relative;     display: inline-block;     border-bottom: 1px dotted black; /* If you want dots under the hoverable text */ } /* Tooltip text */ .tooltip .tooltiptext {     visibility: hidden;     width: 120px;     background-color: black;     color: #fff;     text-align: center;     padding: 5px 0;     border-radius: 6px;       /* Position the tooltip text - see examples below! */ ...

<!-- main_leaderboard, all: [728,90][970,90][320,50][468,60] --> CSS Animations ❮ Previous Next ❯ CSS Animations CSS animations allows animation of most HTML elements without using JavaScript or Flash! CSS Browser Support for Animations The numbers in the table specify the first browser version that fully supports the property. Numbers followed by -webkit-, -moz-, or -o- specify the first version that worked with a prefix. Property @keyframes 43.0 4.0 -webkit- 10.0 16.0 5.0 -moz- 9.0 4.0 -webkit- 30.0 15.0 -webkit- 12.0 -o- animation 43.0 4.0 -webkit- 10.0 16.0 5.0 -moz- 9.0 4.0 -webkit- 30.0 15.0 -webkit- 12.0 -o- What are CSS Animations? An animation lets an element gradually change from one style to another. You can change as many CSS properties you want, as many times you want. To use CSS animation, you must first specify some keyframes for the animatio...

<!-- main_leaderboard, all: [728,90][970,90][320,50][468,60] --> CSS Transitions ❮ Previous Next ❯ CSS Transitions CSS transitions allows you to change property values smoothly (from one value to another), over a given duration. Example: Mouse over the element below to see a CSS transition effect: CSS Browser Support for Transitions The numbers in the table specify the first browser version that fully supports the property. Numbers followed by -webkit-, -moz-, or -o- specify the first version that worked with a prefix. Property transition 26.0 4.0 -webkit- 10.0 16.0 4.0 -moz- 6.1 3.1 -webkit- 12.1 10.5 -o- transition-delay 26.0 4.0 -webkit- 10.0 16.0 4.0 -moz- 6.1 3.1 -webkit- 12.1 10.5 -o- transition-duration 26.0 4.0 -webkit- 10.0 16.0 4.0 -moz- 6.1 3.1 -webkit- 12.1 10.5 -o- transition-property 26.0 4.0 -webkit- 10.0 16...

googletag.cmd.push(function() { googletag.display('div-gpt-ad-1422003450156-2'); }); CSS 3D Transforms ❮ Previous Next ❯ CSS 3D Transforms CSS allows you to format your elements using 3D transformations. Mouse over the elements below to see the difference between a 2D and a 3D transformation: 2D rotate 3D rotate Browser Support for 3D Transforms The numbers in the table specify the first browser version that fully supports the property. Numbers followed by -webkit-, -moz-, or -o- specify the first version that worked with a prefix. Property transform 36.0 12.0 -webkit- 10.0 16.0 10.0 -moz- 9.0 4.0 -webkit- 23.0 15.0 -webkit- transform-origin (three-value syntax) 36.0 12.0 -webkit- 10.0 16.0 10.0 -moz- 9.0 4.0 -webkit- 23.0 15.0 -webkit- transform-style 36.0 12.0 -webkit- 11.0 16.0 10.0 -moz- 9.0 4.0 -webkit- 23.0 15.0 -webk...