css Archives - Page 2 of 13 - Donotsad where can learn any thing work project and make money

Aug 10

CSS – Useful Resources

CSS – Useful Resources ”; Previous Next The following resources contain additional information on CSS. Please use them to get more in-depth knowledge on this topic. Useful Video Courses Full Stack Web Development – HTML, CSS, JavaScript, PHP, ELIXIR 55 Lectures 6 hours Pranjal Srivastava, Harshit Srivastava More Detail Complete HTML and CSS Masterclass For Beginners (Complete Bootcamp Course) 51 Lectures 7 hours Emenwa Global, Ejike IfeanyiChukwu More Detail CSS Bootcamp – Master CSS (Including CSS Grid/Flexbox) Most Popular 88 Lectures 11 hours Code And Create More Detail Learn Web Development with HTML, CSS , Javascript, Typescript, and Vue 32 Lectures 1 hours James Coonce More Detail Learn Web Development with HTML, CSS , Javascript , Typescript, and React 37 Lectures 1.5 hours James Coonce More Detail Learn Web Development with HTML, CSS , Javascript ,Typescript, and Angular 30 Lectures 58 mins James Coonce More Detail Print Page Previous Next Advertisements ”;

Aug 10

CSS – Style Images

CSS – Style Image ”; Previous Next In this tutorial, we will learn about how to style an image to change its shape, size, and layout by using different CSS properties such as padding, borders, height, width, margins, etc. CSS Style Image – Rounded Images The following example demonstrates how to use border-radius: 20px property to create rounded border image − <html> <head> <style> img { width: 100px; height: 100px; border-radius: 20px; } </style> </head> <body> <img src=”images/pink-flower.jpg” alt=”pink-flower”> </body> </html> CSS Style Image – Circle Images The following example demonstrates how to use border-radius: 50% property to create circle shaped image − <html> <head> <style> img { width: 100px; height: 100px; border-radius: 50%; } </style> </head> <body> <img src=”images/pink-flower.jpg” alt=”pink-flower”> </body> </html> CSS Style Image – Thumbnail Images The following example demonstrates how to create thumbnail image using the border property − <html> <head> <style> img { border: 2px solid red; border-radius: 10px; padding: 5px; width: 150px; } </style> </head> <body> <img src=”images/pink-flower.jpg” alt=”pink-flower” > </body> </html> CSS Style Image – Thumbnail Images As Link The following example demonstrates how to create a thumbnail image as a link. To create a link, wrap an anchor tag around the image tag − <html> <head> <style> img { border: 2px solid red; border-radius: 10px; padding: 5px; width: 150px; } img:hover { border: 2px solid blue; box-shadow: 0 0 5px 2px rgba(82, 241, 108, 0.5); } </style> </head> <body> <a target=”_blank” href=”images/red-flower.jpg”> <img src=”images/pink-flower.jpg” alt=”pink-flower”> </a> </body> </html> CSS Style Image – Responsive Images The following example demonstrates how the images will automatically resize to match the screen size − <html> <head> <style> img { max-width: 100%; width: 500px; height: 300px; } </style> </head> <body> <p>Resize the browser window to see the effect.</p> <img src=”images/pink-flower.jpg” alt=”Pink Flower” > </body> </html> CSS Style Image – Center an Image The following example demonstrates how the image will resize to match the screen size, when the screen size is changed − <html> <head> <style> img { display: block; margin-left: auto; margin-right: auto; width: 40%; height: 200px; } </style> </head> <body> <img src=”images/pink-flower.jpg” alt=”Pink Flower”> </body> </html> CSS Style Image – Polaroid Images / Cards The following example demonstrates a responsive polaroid-styled image with a shadow effect − <html> <head> <style> .polaroid-image { width: 60%; height: 200px; background-color: white; box-shadow: 0 3px 6px 0 grey, 0 8px 16px 0 black; margin-bottom: 25px; margin: 20px; } img { width: 100%; height: 150px; } .box { text-align: center; padding: 5px; } </style> </head> <body> <div class=”polaroid-image”> <img src=”images/red-flower.jpg” alt=”Flower”> <div class=”box”> <p>Tree</p> </div> </div> </body> </html> CSS Style Image – Transparent Image The following example demonstrates how to create a transparent image by using the opacity property. The opacity property can be set to a value between 0 and 1. The opacity of “img1” is set to 0.4, making it more transparent, while “img2” is set to 0.8, making it less transparent. <html> <head> <style> .img1 { opacity: 0.4; width: 170px; height: 100px; } .img2 { opacity: 0.8; width: 170px; height: 100px; } </style> </head> <body> <img class=”img1″ src=”images/tree.jpg” alt=”Tree”> <img class=”img2″ src=”images/tree.jpg” alt=”Tree”> </body> </html> CSS Style Image – Center The Text he following example demonstrates the different filter effects that can be applied to an image using filter property − <html> <head> <style> .box { display: flex; align-items: center; justify-content: center; } .center-text { position: absolute; top: 50%; left: 50%; transform: translate(-40%, -40%); font-size: 30px; font-weight: bold; color: blue; } img { width: 100%; height: auto; opacity: 0.4; height: 250px; } </style> </head> <body> <div class=”box”> <img src=”images/tree.jpg” alt=”Tree”> <div class=”center-text”>Tree Image</div> </div> </body> </html> CSS Style Image – Filters The following example demonstrates that different filter effects are applied to an image using filter property − <html> <head> <style> img { width: 300px; height: 300px; height: auto; float: left; max-width: 235px; } .blur-img { filter: blur(3px); } .brightness-img { filter: brightness(220%); } .grayscale-img { filter: grayscale(110%); } .huerotate-img { filter: hue-rotate(120deg); } .invert-img { filter: invert(110%); } .shadow-img { filter: drop-shadow(6px 6px 8px red); } .saturate-img { filter: saturate(8); } .sepia-img { filter: sepia(110%); } </style> </head> <body> <img class=”blur-img” src=”images/pink-flower.jpg” alt=”Flower”> <img class=”brightness-img” src=”images/pink-flower.jpg” alt=”Flower”> <img class=”grayscale-img” src=”images/pink-flower.jpg” alt=”Flower”> <img class=”huerotate-img” src=”images/pink-flower.jpg” alt=”Flower”> <img class=”invert-img” src=”images/pink-flower.jpg” alt=”Flower”> <img class=”shadow-img” src=”images/pink-flower.jpg” alt=”Flower”> <img class=”saturate-img” src=”images/pink-flower.jpg” alt=”Flower”> <img class=”sepia-img” src=”images/pink-flower.jpg” alt=”Flower”> </body> </html> CSS Style Image – Fade In Overlay The following example demonstrates that an image with fade in overlay effect shows text when you hover over the image − <html> <head> <style> .img-container { position: relative; width: 250px; } .img-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.7); opacity: 0; transition: opacity 0.4s ease; } .overlay-text { color: red; font-weight: bold; font-size: 25px; position: absolute; top: 40%; left: 20%; } .img-container:hover .img-overlay { opacity: 1; } img { width: 100%; height: auto; display: block; } </style> </head> <body> <div class=”img-container”> <div class=”img-overlay”> <div class=”overlay-text”>Tutorialspoint</div> </div> <img src=”images/see.jpg” alt=”See Image”> </div> </body> </html> CSS Style Image – Slide In Effect The following example demonstrates that slide-in overlay effect from the top of an image that shows text when you hover over the image − <html> <head> <style> .img-container { position: relative; width: 250px; overflow: hidden; } .img-overlay { position: absolute; bottom: 100%; left: 0; background-color: violet; overflow: hidden; width: 100%; text-align: center; height: 100%; transition: 0.4s ease; } .img-container:hover .img-overlay { bottom: 0; height: 100%; } img { width: 100%; height: auto; display: block; } </style> </head> <body> <div class=”img-container”> <div class=”img-overlay”> <p>CSS Image Slide In Effect</p> </div> <img src=”images/pink-flower.jpg” alt=”Flower Image”>

Aug 10

CSS – Tab Size

CSS – tab-size Property ”; Previous Next CSS tab-size property is used to specify the width of tab characters ((U+0009)) within an element. It allows you to control the visual spacing of tab characters, which can be useful when displaying code or other content where tab characters are significant. Possible Values <integer> − Specifies the width of tab characters as a multiple of the width of a single space character. For example, a value of 4 would make tab characters four times wider than a space character. It cannot be negative. <length> − Specifies the width of tab characters using a fixed length value, such as pixels (px), points (pt), or ems (em). It cannot be negative. Applies to Block containers. Syntax <integer> Values tab-size: 4; tab-size: 0; <length> Values tab-size: 10px; tab-size: 2em; CSS tab-size – Expanding By Character Count The following example demonstrates how the tab-size property sets tab size to the 8 characters and tab size of 12 characters − <html> <head> <style> .tab1 { -moz-tab-size: 8; tab-size: 8; } .tab2 { -moz-tab-size: 12; tab-size: 12; } </style> </head> <body> <pre class=”tab1″> CSS tab-size with 8. </pre> <pre class=”tab2″> CSS tab-size with 12. </pre> </body> </html> CSS tab-size – Comparing To The Default Size The following example demonstrates the default tab size, tab size of 3 characters, and tab size of 3 spaces. The white-space: pre keeps the tabs from collapsing. − <html> <head> <style> p { white-space: pre; } .tab1 { tab-size: 3; } </style> </head> <body> <p>Without tab-size</p> <p> Default tab-size to 8 characters.</p> <p class=”tab1″> tab-size with 3 characters.</p> <p> tab-size with 3 spaces.</p> </body> </html> Print Page Previous Next Advertisements ”;

Aug 10

CSS – Pagination

CSS – Pagination ”; Previous Next CSS pagination is a technique for creating page numbers for a website, which allows users to easily navigate between large amounts of content. It is a simple and effective way to organize your website and make it more user-friendly. Step 1: Add HTML Markup To create a pagination element in HTML, you can use a <div> or <ul> element. The element will contain links for each page of your content, and optionally “Previous” and “Next” links. <div class=”simple-pagination”> <a href=”#”>«</a> <a href=”#”>A</a> <a href=”#”>B</a> <a href=”#”>C</a> <a href=”#”>D</a> <a href=”#”>E</a> <a href=”#”>»</a> </div> Step 2: Define CSS Classes Specify the CSS styles for your pagination, including the display, padding, and list-styles. .simple-pagination { display: flex; list-style: none; padding: 0; } Step 3: Pagination Link Styles You can style the individual pagination links (the <a> elements) to control their appearance, such as their color, padding, and text decoration. .simple-pagination a { text-decoration: none; padding: 12px; color: black; } CSS Simple Pagination The following example demonstrates a simple pagination element that is displayed as a flexbox container − <html> <head> <style> .simple-pagination { display: flex; list-style: none; padding: 0; } .simple-pagination a { text-decoration: none; padding: 12px; color: black; } </style> </head> <body> <div class=”simple-pagination”> <a href=”#”>«</a> <a href=”#”>A</a> <a href=”#”>B</a> <a href=”#”>C</a> <a href=”#”>D</a> <a href=”#”>E</a> <a href=”#”>»</a> </div> </body> </html> CSS Active and Hoverable Pagination You can create a pagination element with different styles by: Add .active class to the current page number. Use :hover selector to change the color of all page links when hovering over them. Here is an example − <html> <head> <style> .simple-pagination { display: flex; list-style: none; padding: 0; } .simple-pagination a { text-decoration: none; padding: 8px 12px; color: #333; } .simple-pagination a.active-link { background-color: violet; color: white; } .simple-pagination a:hover:not(.active-link) { background-color: pink; } </style> </head> <body> <div class=”simple-pagination”> <a href=”#”>«</a> <a href=”#” class=”active-link”>A</a> <a href=”#”>B</a> <a href=”#”>C</a> <a href=”#”>D</a> <a href=”#”>E</a> <a href=”#”>»</a> </div> </body> </html> CSS Rounded Active and Hoverable Buttons You can create a pagination element with a rounded active and hover button by adding the border-radius CSS property. Here is an example − <html> <head> <style> .simple-pagination { display: flex; list-style: none; padding: 0; } .simple-pagination a { text-decoration: none; padding: 8px 12px; color: #333; border-radius: 8px; } .simple-pagination a.active-link { background-color: violet; color: white; } .simple-pagination a:hover:not(.active-link) { background-color: pink; } </style> </head> <body> <div class=”simple-pagination”> <a href=”#”>«</a> <a href=”#” class=”active-link”>A</a> <a href=”#”>B</a> <a href=”#”>C</a> <a href=”#”>D</a> <a href=”#”>E</a> <a href=”#”>»</a> </div> </body> </html> CSS Hoverable Transition Effect You can create a pagination element with smooth transitions when hovering over the pagination links using the transition property. Here is an example − <html> <head> <style> .simple-pagination { display: flex; list-style: none; padding: 0; } .simple-pagination a { text-decoration: none; padding: 8px 12px; color: #333; transition: background-color 0.4s; } .simple-pagination a.active-link { background-color: violet; color: white; } .simple-pagination a:hover:not(.active-link) { background-color: pink; } </style> </head> <body> <div class=”simple-pagination”> <a href=”#”>«</a> <a href=”#” class=”active-link”>A</a> <a href=”#”>B</a> <a href=”#”>C</a> <a href=”#”>D</a> <a href=”#”>E</a> <a href=”#”>»</a> </div> </body> </html> CSS Bordered Pagination When you want to add a border to pagination links, you can use the CSS border property. Here is an example − <html> <head> <style> .simple-pagination { display: flex; list-style: none; padding: 0; } .simple-pagination a { text-decoration: none; padding: 8px 12px; color: #333; transition: background-color 0.4s; border: 2px solid blue; } .simple-pagination a.active-link { background-color: violet; color: white; } .simple-pagination a:hover:not(.active-link) { background-color: pink; } </style> </head> <body> <div class=”simple-pagination”> <a href=”#”>«</a> <a href=”#” class=”active-link”>A</a> <a href=”#”>B</a> <a href=”#”>C</a> <a href=”#”>D</a> <a href=”#”>E</a> <a href=”#”>»</a> </div> </body> </html> CSS Rounded Borders When you want to round the corners of pagination links, you can use the CSS border-radius property. Here is an example − <html> <head> <style> .simple-pagination { display: flex; list-style: none; padding: 0; } .simple-pagination a { text-decoration: none; padding: 8px 12px; color: #333; transition: background-color 0.4s; border: 2px solid blue; } .simple-pagination a.active-link { background-color: violet; color: white; } .simple-pagination a:first-child { border-top-left-radius: 20px; border-bottom-left-radius: 20px; } .simple-pagination a:last-child { border-top-right-radius: 20px; border-bottom-right-radius: 20px; } .simple-pagination a:hover:not(.active-link) { background-color: pink; } </style> </head> <body> <div class=”simple-pagination”> <a href=”#”>«</a> <a href=”#” class=”active-link”>A</a> <a href=”#”>B</a> <a href=”#”>C</a> <a href=”#”>D</a> <a href=”#”>E</a> <a href=”#”>»</a> </div> </body> </html> CSS Space Between Links The following example demonstrates how to use the CSS margin property to create a space around each link in the pagination component − <html> <head> <style> .simple-pagination { display: flex; list-style: none; padding: 0; } .simple-pagination a { text-decoration: none; padding: 8px 12px; color: #333; transition: background-color 0.4s; border: 2px solid blue; margin: 2px; } .simple-pagination a.active-link { background-color: violet; color: white; } .simple-pagination a:hover:not(.active-link) { background-color: pink; } </style> </head> <body> <div class=”simple-pagination”> <a href=”#”>«</a> <a href=”#” class=”active-link”>A</a> <a href=”#”>B</a> <a href=”#”>C</a> <a href=”#”>D</a> <a href=”#”>E</a> <a href=”#”>»</a> </div> </body> </html> The following example demonstrates how to use the CSS column-gap property to create a space around each link in the pagination component − <html> <head> <style> .simple-pagination { display: flex; list-style: none; padding: 0; column-gap: 2px; } .simple-pagination a { text-decoration: none; padding: 8px 12px; color: #333; transition: background-color 0.4s; border: 2px solid blue; } .simple-pagination a.active-link { background-color: violet; color: white; } .simple-pagination a:hover:not(.active-link) { background-color: pink; } </style> </head> <body> <div class=”simple-pagination”> <a href=”#”>«</a> <a href=”#” class=”active-link”>A</a> <a href=”#”>B</a> <a href=”#”>C</a> <a href=”#”>D</a> <a href=”#”>E</a> <a href=”#”>»</a> </div> </body> </html> CSS Pagination Size The following example demonstrates that the font-size property can be used to set the size of the text in

Aug 10

CSS – PX to EM converter

CSS – PX to EM Conversion ”; Previous Next Units px (Pixel) and em (indicates size relative to the size of the font) are two of the measurement units of length. In order to convert px to em, you should use the following formula: em = px / font-size Note: Default font-size is 16px. So while converting the px to em, you need to select your base value (default is 16) for the pixel and use it in the formula to calculate. CSS PX to EM Conversion Table Following table shows the corresponding em values to px values, considering the base pixel value as 16px: PX EM 5px 0.3125em 6px 0.3750em 7px 0.4375em 8px 0.5000em 9px 0.5625em 10px 0.6250em 11px 0.6875em 12px 0.7500em 13px 0.8125em 14px 0.8750em 15px 0.9375em 16px 1.0000em 17px 1.0625em 18px 1.1250em 19px 1.1875em 20px 1.2500em The table above shows just few sample values, you may convert any px value to em, using the formula. Conversion Calculator Refer the calculator to convert px to em and vice-versa. PX to EM Converter Enter px: Result in em: Enter em: Result in px: Print Page Previous Next Advertisements ”;

Aug 10

CSS RWD – Frameworks

CSS RWD Frameworks ”; Previous Next Responsive Web Designing is the need of the hour. The extensive use of mobile devices among the masses, results in active responsive designing so that the applications or websites appear and function correctly on every kind of device. A good and effective CSS framework provides ready-to-use libraries that considerably save the development time used in custom coding by the developers. These CSS frameworks prove to be cross-browser compatible, device-friendly, and provide symmetrical website layouts that are beneficial to the developers. Some of the best, easy-to-use, free CSS frameworks are listed below. CSS RWD Framework – Bootstrap Bootstrap is a powerful and extensively reliable framework, that is free and open-source. It provides easy-to-use structural components. You just need to have the understanding of web technologies like HTML, CSS, and JavaScript. Bootstrap also provides several themes and templates which can be customized as per your requirements. It is a framework with mobile-first approach. Bootstrap provides an array of themes, that makes your website look distinctive. The components of Bootstrap framework ensure performance thus resulting in loading of the site quickly in a matter of seconds. Also, the documentation of Bootstrap is concise, helpful, and easy-to-use. An incredible developer community is also in place, that provides solutions to the issues that one will face. <html lang=”en”> <head> <meta charset=”utf-8″> <meta name=”viewport” content=”width=device-width, initial-scale=1″> <link href=”https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css” rel=”stylesheet”> <script src=”https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js”></script> </head> <body> <div class=”container-fluid p-5 bg-secondary text-white text-center”> <h1>Bootstrap Framework</h1> <p>Resize the screen to see the effect</p> </div> <div class=”container mt-4″> <div class=”row”> <div class=”col-sm-4″> <h2>Column 1</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit…</p> <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris…</p> </div> <div class=”col-sm-4″> <h3>Column 2</h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit…</p> <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris…</p> </div> <div class=”col-sm-4″> <h3>Column 3</h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit…</p> <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris…</p> </div> </div> </div> </body> </html> CSS RWD Framework – Pure CSS Pure CSS is a set of small, responsive modules that can be used in every web project. It is also designed keeping the mobile devices in mind. It is a compact framework that keeps your file size smaller. CSS RWD Framework – Skeleton Skeleton is a simple framework for responsive mobile friendly development. It is as light as a feather and can be quickly started without any compilation or installation. Skeleton provides a well-defined and organized file structure, which considerably reduces the website development time and gives best results. It is extensively used for the development of eCommerce websites. It is a free and open-source CSS framework. CSS RWD Framework – Semantic UI Semantic UI is a free and open-source CSS framework based on LESS and jQuery. This framework is widely used and comes with third-party style guidelines. It helps in creating beautiful and responsive layouts. A wide variety of themes and CSS, JavaScript, font files, and UI elements, such as buttons, breadcrumbs, pre-loaders, etc are provided by Semantic UI. This framework is highly organized, making it easy to fetch a component in a file and thus resulting in reduced load time of files. Apart from this sufficient illustrations and documentations that are easy to learn are provided by Semantic UI. CSS RWD Framework – Foundation Foundation is a free and open-source CSS framework that is for all kinds of devices and mediums. It is semantic, readable, flexible, and entirely customizable. Framework offers a comprehensive scope for tailor-made web designs. It is based on mobile-first model, which lets you build for small devices first, and as the device gets larger, it provides a complete responsive design. Print Page Previous Next Advertisements ”;

Aug 10

CSS – Text Shadow

CSS – text-shadow Property ”; Previous Next The text-shadow property is used to add a shadow effect to text. It allows you to specify the color, offset, blur-radius, and spread-radius of the shadow. Possible Values <color>: Sets the color of the shadow. It is optional. It can be specified either before or after the offset values. Any value for color can be specified, such as, name, HEX or RGB value. <offset-x><offset-y>: Any length value, specifying the x and y values. x value represents the shadow”s horizontal distance from text. y value represents the shadow”s vertical distance from text. If x and y values equal 0, the shadow appears behind the text. <blur-radius> Any length value, specifying the value of blur-radius. It is optional. To make the blur look bigger, you need to provide higher value. If no value is passed, it is taken as 0. Applies to All the HTML elements. DOM Syntax object.style.textShadow = “5px 5px 3px red”; The first two (5px,5px) values specify the length of the shadow offset i.e the X-coordinate and the Y-coordinate. The third value (3px) specifies the blur radius. The last value (red) describes the color of the shadow. CSS text-shadow – Simple Shadow Effects Following is the example which demonstrates how to set the shadow around a text. This may not be supported by all the browsers − <html> <head> </head> <body> <h2>Text Shadow</h2> <p style=”text-shadow: 5px 5px 3px yellow;”>Text shadow</p> <p style=”text-shadow: 10px 5px #00ffff;”>Text shadow</p> <p style=”text-shadow: blue 0px 0px 2px”>Text shadow</p> <p style=”text-shadow: rgb(26, 69, 105) 0px 0px 10px”>Text shadow</p> </body> </html> Print Page Previous Next Advertisements ”;

Aug 10

CSS – 2d transform

CSS – 2D Transforms ”; Previous Next CSS provides a set of properties that allow you to transform and adjust the elements in the two-dimensional space. The properties that let you transform the elements include translations, rotations, scaling, skewing, etc. The following table lists all the various properties that are used transform the elements in the two-dimensional space: Property Description rotate Rotates an element by a specified angle. scale Scales by an element by a specified factor. transform Transforms an element, such as rotates, scales, skews or translates. transform-box Defines the layout box for transformation. transform-origin Sets the origin for the transformation of an element. translate Moves an element from its current position. matrix() Defines the transformation of an element based on six matrix values. rotate() Rotates an element around a fixed point in two-dimensional space. rotateX() Rotates an element around the horizontal axis in two-dimensional space. rotateY() Rotates an element around the vertical axis in two-dimensional space. scale() Scales an element up or down in two-dimensional space. scaleX() Scales an element up or down horizontally. scaleY() Scales an element up or down vertically. skew() Skews an element in two-dimensional space. skewX() Skews an element in the horizontal direction. skewY() Skews an element in the vertical direction. translate() Translates an element in two-dimensional space. translateX() Translates an element horizontally. translateY() Translates an element vertically. Print Page Previous Next Advertisements ”;

Aug 10

CSS – Transition

CSS – transition Property ”; Previous Next CSS transition property allows you to animate changes in an element”s style properties over a specified duration. They provide a simple and efficient way to add animations to web elements without the need for complex JavaScript code or external libraries. CSS transition property is a shorthand property for transition-property transition-duration transition-timing-function transition-delay transition-behavior (This property is on an experimental basis and may not be supported). Possible Values <length> − A specific length value such as pixels (px), centimeters (cm), inches (in), etc. Applies to All elements, ::before and ::after pseudo-elements. Syntax transition: margin-right 4s; transition: margin-right 4s 1s; transition: margin-right 4s ease-in-out; transition: margin-right 4s ease-in-out 1s; transition: display 4s allow-discrete; transition: margin-right 4s, color 1s; The value for the transition property is defined as one of the following: The none value indicates that there will be no transitions on this element. This is the default value. Commas are used to separate one or more single-property transitions. A single-property transition specifies the transition for one specific property or all properties. This includes: A zero or one value indicating the property or properties for which the transition should be applied. This can be specified as: A <custom-ident> representing a single property. The all value in transitions indicates that the transition will be applied to all attributes that change when the element changes its state If no value is specified, all value will be assumed, and the transition will apply to all changing properties. Specify zero or one <easing-function> value indicating the easing function to be used. Specify zero, one, or two <time> values for transition properties. The first parsed-time value is applied to transition-duration, and the second is assigned to transition-delay. If a property has discrete animation behaviour, a zero or one value indicates whether to initiate transitions. If the value is present, it can be either allow-discrete or normal keyword. CSS transition – With Two Values The following example demonstrates that transition is applied to the padding property with a duration of 2s. When you hover over the box, padding increases to 15px and the background color changes to greenyellow − <html> <head> <style> .box { font-size: 14px; width: 100px; padding: 5px; transition: padding 2s; background-color: lightskyblue; } .box:hover { background-color: greenyellow; padding: 15px; } </style> </head> <body> <div class=”box”>Hover over me</div> </body> </html> CSS transition – delay Value The following example demonstrates that transition is applied to the padding property. The transition takes 2s to complete, and it starts after a delay of 0.5s − <html> <head> <style> .box { font-size: 14px; width: 100px; padding: 5px; transition: padding 2s .5s; background-color: lightskyblue; } .box:hover { background-color: greenyellow; padding: 15px; } </style> </head> <body> <div class=”box”>Hover over me</div> </body> </html> CSS transition – easing Function The following example demonstrates that transition is applied to the background-color property. When you hover over the box, background color changes to green-yellow, starting a smooth color transition with an ease-in-out timing function over the 4s duration − <html> <head> <style> .box { font-size: 14px; width: 100px; padding: 15px; transition: background-color 4s ease-in-out; background-color: lightskyblue; } .box:hover { background-color: greenyellow; } </style> </head> <body> <div class=”box”>Hover over me</div> </body> </html> CSS transition – easing Function and delay The following example demonstrates that transition is applied to the padding property. When you hover over the box, background color changes to green-yellow and padding increases to 15px, starting a smooth transition over the duration of 4s with an ease-in-out timing function and a delay of 0.7s − <html> <head> <style> .box { font-size: 14px; width: 100px; padding: 5px; transition: padding 4s ease-in-out 0.7s; background-color: lightskyblue; } .box:hover { background-color: greenyellow; padding: 15px; } </style> </head> <body> <div class=”box”>Hover over me</div> </body> </html> CSS transition – behavior Value The following example demonstrates that transition is applied to the background-color property. When you hover over the box, background color changes to green-yellow, starting a smooth transition over the duration of 5s using the allow-discrete timing function − <html> <head> <style> .box { font-size: 14px; width: 100px; padding: 10px; transition: background-color 5s allow-discrete; background-color: lightskyblue; } .box:hover { background-color: greenyellow; } </style> </head> <body> <div class=”box”>Hover over me</div> </body> </html> CSS transition – Applied To Two Properties The following example demonstrates that transition will be applied on text color in 2s and on margin-left in 4s. The text color will transition in 2s, while the left margin will take 4s − <html> <head> <style> .box { font-size: 14px; width: 100px; padding: 10px; transition: color 2s, margin-left 4s; background-color: lightskyblue; } .box:hover { color: red; margin-left: 70px; } </style> </head> <body> <div class=”box”>Hover over me</div> </body> </html> CSS transition – Related Properties Following is the list of CSS properties related to transition: property value transition-delay Determines the amount of time to wait before starting a transition effect when a property”s value changes. transition-duration Determines amount of time that a transition animation should take to complete. transition-property Specifies which CSS properties should have a transition effect applied. transition-timing-function Determines which intermediate values are generated for CSS properties affected by a transition effect. Print Page Previous Next Advertisements ”;

Aug 10

CSS – Unicode-bidi

CSS – Unicode-bidi Property ”; Previous Next CSS unicode-bidi property is used to control how bidirectional text is displayed in a document. Bidirectional text contains both left-to-right (LTR) and right-to-left (RTL) text. The unicode-bidi property allows developers to override the default behavior of the browser and ensure that bidirectional text is displayed correctly. Possible Values normal − This is the default value, and it specifies that the text should be displayed according to the inherent direction of the text itself. In other words, it will use the direction of the characters in the text to determine how it should be displayed. embed − This value is used to explicitly set the direction of the text within an element. When you set unicode-bidi to embed, you can also use the direction property to specify whether the text should be displayed left-to-right (ltr) or right-to-left (rtl). bidi-override − This value creates an override for inline elements. In case of block elements, it overrides the browser”s bi-directional text algorithm and flows the text inside any inline children strictly according to the direction property. isolate − This value isolates the element from its siblings. isolate-override − This value uses the isolation behavior of the isolate keyword to the surrounding content and the override behavior of the bidi-override keyword to the inner content. plaintext − Prevents bidirectional text (BIDI) algorithms from affecting the text inside the element. Applies to All positioned elements, but some of the values have no effect on non-inline elements. DOM Syntax object.style.unicodeBidi = “normal|embed|bidi-override|isolate|isolate-override|plaintext”; CSS properties unicode-bidi and direction are the only properties that are not affected by the all shorthand property. This property is only used by Document Type Definition (DTD) designers. It is generally not recommended for web designers or similar authors to override it. CSS unicode-bidi – normal Value The following example demonstrates using unicode-bidi: normal, the text in its default order from right-to-left direction (RTL) − <html> <head> <style> .box { direction: rtl; unicode-bidi: normal; color:red; } </style> </head> <body> <h2>CSS unicode-bidi – normal Value</h2> <p>The following text is displayed in its default order from right-to-left direction.</p> <div class=”box”> Lorem Ipsum is simply dummy text of the printing and typesetting industry. </div> </body> </html> CSS unicode-bidi – embed Value The following example demonstrates using unicode-bidi: embed. This value embeds the direction of the text within its surrounding content, and when the direction is set to rtl, the text is displayed in a right-to-left (RTL) direction − <html> <head> <style> .box { direction: rtl; unicode-bidi: embed; color:red; } </style> </head> <body> <h2>CSS unicode-bidi – embed Value</h2> <p>The following text is displayed in its default order from right-to-left direction.</p> <div class=”box”> Lorem Ipsum is simply dummy text of the printing and typesetting industry. </div> </body> </html> CSS unicode-bidi – bidi-override Value The following example demonstrates using unicode-bidi: bidi-override. This value displays the text in reverse order, with the right most character displayed in the first position.− <html> <head> <style> .box { direction: rtl; unicode-bidi: bidi-override; color:red; } </style> </head> <body> <h2>CSS unicode-bidi – bidi-override Value</h2> <p>The following text is displayed in reverse order of the characters in right-to-left direction.</p> <div class=”box”> Lorem Ipsum is simply dummy text of the printing and typesetting industry. </div> </body> </html> CSS unicode-bidi – isolate Value The following example demonstrates using unicode-bidi: isolate. This value is used to isolate a bidirectional text from its surrounding text. − <html> <head> <style> .box { direction: rtl; unicode-bidi: isolate; color:red; } </style> </head> <body> <h2>CSS unicode-bidi – isolate Value</h2> <p>The following text is displayed in its default order from right to left.</p> <div class=”box”> Lorem Ipsum is simply dummy text of the printing and typesetting industry. </div> </body> </html> CSS unicode-bidi – isolate-override Value The following example demonstrates using unicode-bidi: isolate-override. This value is used to isolate and override the bidirectional text from its surrounding text − <html> <head> <style> .box { direction: rtl; unicode-bidi: isolate-override; color:red; } </style> </head> <body> <h2>CSS unicode-bidi – isolate-override Value</h2> <p>The following text is displayed in reverse order of the characters in right-to-left direction.</p> <div class=”box”> Lorem Ipsum is simply dummy text of the printing and typesetting industry. </div> </body> </html> CSS unicode-bidi – plaintext Value The following example demonstrates using unicode-bidi: plaintext. This value treats the text as plain text without applying any bidirectional text algorithms. − <html> <head> <style> .box { direction: rtl; unicode-bidi: plaintext; color:red; } </style> </head> <body> <h2>CSS unicode-bidi – plaintext Value</h2> <p>The following text is displayed in its default order from left-to-right direction.</p> <div class=”box”> Lorem Ipsum is simply dummy text of the printing and typesetting industry. </div> </body> </html> CSS unicode-bidi – Related Properties Following is the list of CSS properties related to unicode-bidi: property value direction Sets the direction of text in a block-level element. Print Page Previous Next Advertisements ”;