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
Page 3 of 130
Disable text wrapping inside an element using CSS
To disable text wrapping inside an element, use the white-space property. You can try to run the following code to implement the white-space propertyExample p { white-space: nowrap; } This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is some text. This is demo text.
Read MoreSet Bordered Form Inputs with CSS
To set border to form inputs, use the CSS border property.You can try to run the following code to add borderExample input[type = text] { width: 100%; padding: 10px 15px; margin: 5px 0; box-sizing: border-box; border: 3px inset orange; } Fill the below form, Subject Student
Read MoreSet a delay for the CSS transition effect
Use the transition-delay property to set a delay for the transition effect with CSS. You can try to run the following code to set a 1-second delay of transition:Example div { width: 150px; height: 150px; background: blue; transition: width 3s; transition-delay: 2s; } div:hover { width: 350px; } Heading One Hover over the below box to change its width. It begins with a delay of 2 seconds.
Read MoreUse CSS max-width property responsive for video player
You can try to run the following code to use a max-width property to make your video player responsive −Example video { max-width: 100%; height: auto; } To check the effect, you need to resize the browser.
Read MorePerform Animation on CSS border-bottom-color property
To implement animation on the border-bottom-color property with CSS, you can try to run the following code Example div { width: 500px; height: 400px; background: yellow; border: 10px solid yellow; background-image: url('https://www.tutorialspoint.com/latest/microservice_architecture.png'); animation: myanim 3s infinite; background-position: bottom left; background-size: 50px; } @keyframes myanim { 20% { background-color: maroon; background-position: bottom right; background-size: 90px; border-bottom-color: green; } } Performing Animation for bottom border color
Read MorePerform Animation on CSS opacity
To implement animation on opacity property with CSS, you can try to run the following code:Example #demo1 { position: absolute; top: 60px; width: 300px; height: 150px; background-color: lightblue; animation: myanim 4s infinite; } #demo2 { position: absolute; top: 90px; left: 30px; width: 300px; height: 150px; background-color: orange; animation: myanim 3s infinite; } #demo3 { position: absolute; top: 120px; left: 60px; width: 350px; height: 150px; background-color: coral; } @keyframes myanim { 30% { opacity: 0.4; } } Showing opacity End div Start div
Read MoreHow to Create a Checkmark / Tick with CSS
We can create a customized checkmark using CSS. The following examples illustrate this effect −Example div { margin: 2%; position: relative; width: 40px; height: 40px; box-shadow: inset 0 0 12px lightblue; } div::before { content: ""; position: absolute; width: 8px; top: 50%; height: 50%; border-radius: 2px; background-color: rgb(123, 45, 20); transform: translateX(12px) rotate(-45deg); transform-origin: left bottom; z-index: +1; } div::after { content: ""; position: absolute; bottom: 0; height: 8px; width: 100%; border-radius: 2px; background-color: rgb(200, 52, ...
Read MoreUsing Data-Attributes (data-*) in CSS
We can store extra information about elements using data-* attribute. The following examples illustrate CSS data-* attribute.Example dl { margin: 2%; } p { width: 60%; background-color: lightgreen; padding: 2%; color: white; text-align: center; } dt { font-weight: bold; } dt:hover { cursor: pointer; } dd { font-style: italic; } Tea Hot Spicy Tea or Ice Lemon Tea Toast Hot Garlic Butter Toast (hover over food item) function showDescription(food) { let foodType = food.getAttribute("data-food-type"); document.querySelector('p').textContent = ("We have ...
Read MoreControlling Whether Mouse & Touch Allowed with CSS pointer-events Property
Using the CSS pointer-events property we can control whether a mouse and touch are allowed on an element.The syntax of CSS pointer-events property is as follows −pointer-events: auto|none;Above,auto is default. Element reacts to pointer events, whereasnone: Element does not react to pointer eventsExampleThe following examples illustrate CSS pointer-events property. a { margin: 10vh; pointer-events: none; } a:last-of-type { pointer-events: auto; } No pointer event here Automatic pointer event here OutputThis will produce the following result −Example select { margin: 10vh; pointer-events: none; background-color: mistyrose; } No event here a b c OutputThis will produce the following result −
Read MoreCreating Attractive First Lines with CSS ::first-line
The CSS ::first-line pseudo-element helps us style first line of an elementThe following examples illustrate CSS ::first-line pseudo-element.Example body { text-align: center; background-color: darkorchid; } ::first-line { font-size: 2em; color: black; font-weight: bold; text-shadow: 0 -10px grey; } Donec rutrum a erat vitae interdum. Donec suscipit orci sed arcu cursus imperdiet. Duis consequat aliquet leo, quis aliquam ex vehicula in. Vivamus placerat tincidunt hendrerit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque semper ex eget nulla consectetur varius. Integer a dolor leo. Donec semper ...
Read More