is it possible to create a background with 3 colors and 3 directions in CSS?
I'm a beginner with CSS gradients.
Here is a solution with only one div and multiple gradient and without the need to complicate with transform or negative margin:
.box {
width:200px;
height:200px;
background:
linear-gradient(150deg,#0c13a2 35%,transparent 35.5%),
linear-gradient(-120deg, #000000 50%, #c70535 50.5%);
}
<div class="box">
</div>
Related
This question already has answers here:
Is it possible to have two background colors for a single html element? [duplicate]
(3 answers)
Closed 2 years ago.
I'm looking for a way to set the background-color of an HTML document with 2 colors instead of one. This kind of question has been asked before, but I want to set the two colors height-wise (split vertically) rather than width-wise.
I'm not sure what you found, but you can use linear-gradient for this:
body {
height: 100vh;
background: linear-gradient(0deg, rgba(204,0,0,1) 50%, rgba(0,212,255,1) 50%);
}
<body>
</body>
You just need to set the angle to 0 deg
You can define css like
#grad1 {
height: 100%;
background-color: red; /* For browsers that do not support gradients */
background-image: linear-gradient(orange, white, green);
}
and use this css in your div
<div id="grad1"></div>
Note: change color code and height as per your need
you can do simply like this.
<div>
<div className='first'>
hello
</div>
<div className='second'>
hi
</div>
</div>
Css:
.first{
height: calc(50vh);
background: blue;
}
.second{
height: calc(50vh);
background: red;
}
My code like this :
<v-col
sm="3"
class="contain-left"
>
<div id="rectangle">
</div>
<div id="triangle-topright">
</div>
</v-col>
My codepen like this : https://codepen.io/positivethinking639/pen/MWwGygw
Can it be custom by CSS or have to pass image?
I try use css, but there exist 2 element. there are rectangle element and triangle top right element
I want to make it only 1 element. Because I want to display slides inside that content. So I want to combine it into 1 element
How can I do it?
As I interpret your question, you want to create a box with a diagonal line through it.
.container {
background: linear-gradient(to left bottom, #d3e3ff 50%, #eff6ff 50%);
width: 100px;
height: 100px;
}
<div class="container" />
You can consider using multiple backgrounds on one element, values are to be adjusted according to what you want
div {
background:
linear-gradient(25deg, #00000000 49%, #d3e3ff 50%) 0 0/100% 50% no-repeat,
linear-gradient(#eff6ff, #eff6ff) 0 0/50% 100% no-repeat;
width: 100px;
height: 150px;
}
<div></div>
I'm trying to achieve the following drop shadow effect using CSS:
I have tried styling an <hr> element with a linear gradient as the background image as an alternative to using the box-shadow rule on an image however it does not produce the desired curved shadow effect.
Is what I am trying to do possible via CSS only ?
Here is my current code:
HTML
<section class="section-categories section-fruits">
<div class="row">
<figure class="categories">
<img src="res/img/category/fruits.png" alt="Offers" class="categories__fruits">
</figure>
<div class="categories__explore">
<p>Fruits & Vegetables</p>
<p>A variety of fresh fresh and vegetables</p>
<button>Explore fruit and veg</button>
</div>
</div>
</section>
CSS
/* Using Box Shadow, but didn't get the desired effect */
.section-categories{
height: 250px;
margin: 20px 0px;
box-shadow: 0px 1px 1px rgba(0,0,0,0.3);
}
One pure CSS approach might be to use the radial-gradient function on a pseudo element as follows:
/* The shadow CSS class element */
.shadow {
position:relative;
}
/* The CSS peseudo element that achieves the shadow effect */
.shadow:after {
content:'';
display:block;
position:absolute;
bottom:-1rem;
/* The main idea with this technique is to use a radial gradient to simulate the
desired effect */
background:radial-gradient(farthest-corner at 50% 0px, grey 0%, transparent 50%);
width:100%;
height:1rem;
}
/* The styling below is not part of the technique and is included to support the snippet */
div {
display:flex;
flex-direction:row;
justify-content:center;
align-items:center;
}
div button {
background:red;
}
<div class="shadow">
<img src="https://i.pinimg.com/originals/2b/1c/f5/2b1cf5525873467315eaa0c07394d302.jpg" height="100px" />
<button>Explore</button>
</div>
The idea here is to define a pseudo element :after the actual element casting the shadow (ie the <div> in the snippet above), which contains a radial-gradient. To simulate the desired effect, the radial-gradient is colored with a dark inner and transparent outer, with the center of that gradient being offset to the upper edge of the pseudo element via the farthest-corner at 50% 0px parameters.
Hope that helps
How can one add opacitiy to just the left 100px of a 600px wide image in css? Is there a css property for that?
I have tried to add an overlapping div and add opacity to this div, but that is a pain in the back and does not look as a good solution.
Well i found that overlapping div with position:absolute is the only solution for this because their is no property in css to catch half image.
HTML
<div class="parent">
<div id="opacity_div"></div>
<img class="half_fade" src="http://i.stack.imgur.com/W7mPR.jpg?s=32&g=1">
</div>
CSS
.parent{
position:relative;
}
#opacity_div{
background:#fff;
height:20px;
width:20px;
position:absolute;
top:18px;
left:6px;
opacity:0.5 /* manipulate to desired opacity */
}
img.half_fade {
position:absolute;
top:0;left:0;
z-index:-1000;
}
Example : http://jsfiddle.net/JMBFS/81/
Checkout this question to understand better : https://drupal.stackexchange.com/questions/70025/how-to-apply-opacity-to-just-a-portion-of-the-image/70029
The solution is to use overlay the image element with another image element, using position absolute and clipping (http://codepen.io/anon/pen/jqpwgV).
HTML:
<img src="img.jpg" id="image-overlay" />
<img src="img.jpg" id="image" />
CSS:
#image-overlay{position:absolute;clip: rect(0px,498px,374px,100px);}
#image{opacity:0.5;}
If you want to be future ready. Use clip-path with graceful degradation in your CSS. See code below (or http://codepen.io/anon/pen/zqLdxW).
#image-overlay{position:absolute;
clip: rect(0px,498px,374px,100px);
-webkit-clip-path: inset(0px 0px 0px 100px);
clip-path: inset(0px 0px 0px 100px);
}
#image{opacity:0.5;}
I need to add different colors for a single table cell as the image given.How can I do that without separating the cell as different div.
You can use css linear gradients like this (this is an example with thwo colors, red and blue):
#test{
background: linear-gradient(red 100px, blue 100px);
background: -webkit-linear-gradient(red 100px, blue 100px);
background: -o-linear-gradient(red 100px, blue 100px);
background: -moz-linear-gradient(red 100px, blue 100px);
}
Here's the fiddle http://jsfiddle.net/eMmE9/
Using CSS3 linear gradient you can add multiple background color. Here is a Quick DEMO.
All latest browser support it. to work on older browser please add vendor prefix as well.
Here is the CSS I've used.
div{
width:200px;
height:150px;
background:linear-gradient(to bottom, #808000 0%, #808000 20%, #400080 20%, #400080 40%, #FF0080 40%, #FF0080 60%, #FFFF00 60%, #FFFF00 80%, #800040 80%, #800040 100%); /*standard as per W3C*/
}
See the outcome here.
This might help you
<td bgcolor="#FF0000"></td>
<td bgcolor="#00FF00"></td>
<td bgcolor="#0000FF"></td>
HTML
<table id="test">
<tr>
<td>
<div class="block1">
</div>
<div class="block1 blue">
</div>
<div class="block1 green">
</div>
<div class="block1 yellow">
</div>
</td>
</tr>
</table>
CSS
#test{
height:200px;
width:200px;
}
.block1
{
width:200px;
height:50px;
background:red;
}
.blue
{
background:blue;
}
.green
{
background:green;
}
.yellow
{
background:yellow;
}
This is the solution . You can check my fiddle too
http://jsfiddle.net/eMmE9/4/
css linear gradients is great option to fullfill your need. you can generate css by selecting your colors and patterns from this Site with all browser support.