Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
CSS Articles
Found 1,299 articles
How to add a colored border to a button with CSS?
To add colored border, use the CSS border property.ExampleYou can try to run the following code to add a colored border. .button { background-color: yellow; color: black; text-align: center; font-size: 15px; padding: 20px; border-radius: 15px; border: 3px dashed blue; } Result Click below for result: Result
Read MoreCSS3 Opacity property
The opacity is a thinner paints need black added to increase opacity. The following example shows CSS3 Opacity property − Example #m1 {background-color:rgb(255,0,0);opacity:0.6;} #m2 {background-color:rgb(0,255,0);opacity:0.6;} #m3 {background-color:rgb(0,0,255);opacity:0.6;} HSLA colors: Red Green Blue
Read MoreHow to limit input text length using CSS3?
With HTML, you can easily limit input length. However, with CSS3, it will not be possible, since CSS can’t be used to limit the number of input characters. This will cause a functional restriction.CSS deals with presentation i.e. how your web page will look. This is done with HTML attribute malength, since it’s for behavior.Let’s see how to do it in HTML −ExampleYou can try to run the following code to limit input text length HTML maxlength attribute Student Name
Read MoreUsage of CSS :first-line pseudo-element
Use this element to add special styles to the first line of the text in a selector. The following example demonstrates how to use the :first-line element to add special effects to the first line of elements in the document.Example p:first-line { text-decoration: underline; } p.noline:first-line { text-decoration: none; } This line would not ...
Read MoreWhich element is used to add special style to the first letter of the text in a selector with CSS
Use the :first-letter element to add special effects to the first letter of elements in the document. You can try to run the following code to add special styles to the first letter of text −Example p:first-letter { font-size: 5em; } p.normal:first-letter { font-size: 10px; } First character of this paragraph will be normal ...
Read MoreFade Out Left Animation Effect with CSS
To implement Fade Out Left Animation Effect on an image with CSS, you can try to run the following code −Example .animated { background-image: url(/css/images/logo.png); background-repeat: no-repeat; background-position: left top; padding-top:95px; margin-bottom:60px; -webkit-animation-duration: 10s; animation-duration: 10s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } @-webkit-keyframes fadeOutLeft { 0% { opacity: 1; -webkit-transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(-20px); } } @keyframes fadeOutLeft { 0% { opacity: 1; transform: translateX(0); } 100% { opacity: 0; transform: translateX(-20px); } } .fadeOutLeft { -webkit-animation-name: fadeOutLeft; animation-name: fadeOutLeft; } Reload page function myFunction() { location.reload(); }
Read MoreUsage of CSS !important rule
The !important rule provides a way to make your CSS cascade. It also includes the rules that are to be applied always. A rule having a !important property will always be applied, no matter where that rule appears in the CSS document.For example, in the following style sheet, the paragraph text will be black, even though the first style property applied is red − If you want to make sure that a property always applied, you would add the !important property to the tag. Therefore, to make the paragraph text always red, you should write it as follows ...
Read MoreMake any particular color transparent with CSS Filters
To make any particular color transparent, use Chroma Filter. You can use it with scrollbars also.The following parameter can be used in this filterParameterDescriptionColorThe color that you'd like to be transparent.Implementing the CSS Chroma Filter − Text Example: CSS Tutorials
Read MoreFade Out Down Animation Effect with CSS
To implement Fade Out Down Animation Effect on an image with CSS, you can try to run the following code −Example .animated { background-image: url(/css/images/logo.png); background-repeat: no-repeat; background-position: left top; padding-top:95px; margin-bottom:60px; -webkit-animation-duration: 10s; animation-duration: 10s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } @-webkit-keyframes fadeOutDown { 0% { opacity: 1; -webkit-transform: translateY(0); } 100% { opacity: 0; -webkit-transform: translateY(20px); } } @keyframes fadeOutDown { 0% { opacity: 1; transform: translateY(0); } 100% { opacity: 0; transform: translateY(20px); } } .fadeOutDown { -webkit-animation-name: fadeOutDown; animation-name: fadeOutDown; } Reload page function myFunction() { location.reload(); }
Read MoreCreate a mirror image with CSS
The flip effect is used to create a mirror image of the object. The following parameters can be used in this filter -ParameterDescriptionFlipHCreates a horizontal mirror imageFlipVCreates a vertical mirror imageExampleYou can try to run the following code to create a mirror image Text Example: CSS Tutorials
Read More