- Trending Categories
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
Found 8894 Articles for Front End Technology
![Anvi Jain](https://www.tutorialspoint.com/assets/profiles/13591/profile/60_98631-1512716973.jpg)
120 Views
You can try to run the following code to achieve responsiveness for background image with CSS −ExampleLive Demo div { width: 100%; height: 300px; border: 2px dashed blue; background-image: url('https://www.tutorialspoint.com/python/images/python-data-science.jpg'); background-repeat: no-repeat; background-size: contain; } To check the effect, you need to resize the browser.
![Nitya Raut](https://www.tutorialspoint.com/assets/profiles/13573/profile/60_92249-1512715559.jpg)
339 Views
You can try to run the following code to build a responsive grid-view:ExampleLive Demo * { box-sizing: border-box; } .header { border: 1px solid black; padding: 10px; } .leftmenu { width: 30%; float: left; ... Read More
![Ankith Reddy](https://www.tutorialspoint.com/assets/profiles/22328/profile/60_142162-1519038074.jpg)
3K+ Views
To add transparency to a button, use the CSS opacity property. This creates a disabled look for the button.You can try to run the following code to add transparency to a buttonExampleLive Demo .btn1 { color: black; text-align: center; font-size: 15px; } .btn2 { color: black; text-align: center; font-size: 15px; opacity: 0.8; } Result Click below for result: Enabled Disabled
![George John](https://www.tutorialspoint.com/assets/profiles/13511/profile/60_58410-1512537824.png)
95 Views
Use the align-content property with value space-between to add space between the flex lines.You can try to run the following code to implement the space-between valueExampleLive Demo .mycontainer { display: flex; height: 200px; background-color: red; align-content: space-between; flex-wrap: wrap; } .mycontainer > div { background-color: yellow; text-align: center; line-height: 60px; font-size: 30px; width: 100px; margin: 5px; } Queue Q1 Q2 Q3 Q4 Q5 Q6 Q7 Q8
![Nancy Den](https://www.tutorialspoint.com/assets/profiles/13557/profile/60_88439-1512714529.jpg)
78 Views
Use the flex-direction property to specify the direction of the flexible items. You can try to run the following code to implement the flex-direction property:ExampleLive Demo .mycontainer { display: flex; flex-direction: column; background-color: orange; } .mycontainer > div { background-color: white; text-align: center; line-height: 40px; font-size: 25px; width: 100px; margin: 5px; } Quiz Q1 Q2 Q3 Q4 Q5 Q6
![Daniol Thomas](https://www.tutorialspoint.com/assets/profiles/13551/profile/60_130035-1512726078.jpg)
74 Views
Use the column-rule-width property to set the width of the rule between columns.ExampleYou can try to run the following code to implement the column-rule-width property:Live Demo .demo { column-count: 4; column-gap: 50px; column-rule-color: maroon; column-rule-style: dashed; column-rule-width: 5px; } This ... Read More
![Krantik Chavan](https://www.tutorialspoint.com/assets/profiles/13545/profile/60_126883-1512724834.jpg)
73 Views
To set the style of the rule between columns, use the column-rule-style property. You can try to run the following code to implement the column-rule-style property.ExampleLive Demo .demo { column-count: 4; column-gap: 50px; column-rule-color: maroon; column-rule-style: dashed; } This is demo text. This is demo ... Read More
![Ankith Reddy](https://www.tutorialspoint.com/assets/profiles/22328/profile/60_142162-1519038074.jpg)
104 Views
Use the justify-content property with value space-around to add space between the flex-items.You can try to run the following code to implement the space-between valueExampleLive Demo .mycontainer { display: flex; background-color: red; justify-content: space-between; } .mycontainer > div { background-color: orange; text-align: center; line-height: 60px; font-size: 30px; width: 100px; margin: 5px; } Quiz Q1 Q2 Q3 Q4