- Data Structure
- Networking
- RDBMS
- Operating System
- Java
- MS Excel
- iOS
- HTML
- CSS
- Android
- Python
- C Programming
- C++
- C#
- MongoDB
- MySQL
- Javascript
- PHP
- Physics
- Chemistry
- Biology
- Mathematics
- English
- Economics
- Psychology
- Social Studies
- Fashion Studies
- Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Seetha has Published 86 Articles
seetha
919 Views
When we set the width and height of an element in CSS then often the element appears bigger than the actual size. This is because by default, the padding and border are added to the element’s width and height and then the element is displayed.The box sizing property includes the ... Read More
seetha
421 Views
To create a horizontal navigation bar, use the floating list item.ExampleYou can try to run the following code to create horizontal navigation bar −Live Demo ul { list-style-type: none; margin: 0; padding: 0; } li { float: left; } li a { display: block; padding: 8px; background-color: orange; } Home News Contact About
seetha
87 Views
Use the CSS :out-of-range selector to style elements with a value outside a specified range.ExampleYou can try to run the following code to implement the :out-of-range selector:Live Demo input:out-of-range { border: 3px dashed orange; background: yellow; } The style only works for the value entered out of range
seetha
924 Views
Use the CSS :nth-last-of-type(n) selector to select every element that is the second element of its parent, counting from the last child.ExampleYou can try to run the following code to implement the :nth-last-of-type(n) selector:Live Demo p:nth-last-of-type(2) { ... Read More
seetha
122 Views
You can try to run the following code to implement Y-axis 3D transform with CSS3:ExampleLive Demo div { width: 200px; height: 100px; background-color: pink; border: 1px solid black; } div#yDiv { -webkit-transform: rotateY(150deg); /* Safari */ transform: rotateY(150deg); /* Standard syntax */ } tutorialspoint.com Rotate Y axis tutorialspoint.com.
seetha
120 Views
Use the rotateZ(angle) method to rotate transform the element by using z-axis with CSS3 −ExampleLive Demo div { width: 200px; height: 100px; background-color: pink; border: 1px solid black; } div#zDiv { -webkit-transform: rotateZ(90deg); /* Safari */ transform: rotateZ(90deg); /* Standard syntax */ } rotate Z axis tutorials point.com. Output
seetha
241 Views
Used to translateY(n) method to transform the element along with y-axis.Let us see the syntax:translateY(n)Here, n is a length representing the abscissa of the translating vector.ExampleLet us see an example −div { width: 50px; height: 50px; background-color: black; } .trans { transform: translateY(20px); background-color: orange; }
seetha
99 Views
CSS border-image property is used to add image border to some elements. You can try to run the following code to implement the border-image property −ExampleLive Demo #borderimg1 { border: 15px solid transparent; padding: 15px; border-image: url(https://tutorialspoint.com/css/images/border.png) 50 round; } This is image border example.
seetha
192 Views
Use the border-top-right radius property in CSS to set the top right radius border. You can try to run the following code to implement border-top-right-radius property −ExampleLive Demo #rcorner { border-radius: 25px; border-top-right-radius: 45px; background: orange; padding: 20px; width: 400px; height: 250px; } Rounded border-top-right corner!