I added CSS code to create frames around woocommerce product images.
.woocommerce-product-gallery__image img {
background-color: #fff;
width: 100%;
max-width: 100%;
height: auto;
padding: 20px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0
rgba(0, 0, 0, 0.19);
}
It works with a simple product.
However, I don't know what to do with a variable product. Indeed, I want the frame to appear only when an attribute is selected.
For example, a variable product with 2 attributes:
-black
-white
I would like me to apply the following code for the white attribute
.woocommerce-product-gallery__image img {
background-color: #fff;
width: 100%;
max-width: 100%;
height: auto;
padding: 20px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0
rgba(0, 0, 0, 0.19);
}
And this one for the black attribute.
.woocommerce-product-gallery__image img {
background-color: #000;
width: 100%;
max-width: 100%;
height: auto;
padding: 20px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0
rgba(0, 0, 0, 0.19);
}
I know that we can add images by variations but I want to work with CSS code, which is easier to manage.
Is there a specific class for the attribute? Should I use a php function?
Thank you all!
Related
I have to create this modal with same style:
This is what I have right now:
.notification {
position: fixed;
top: 32px;
right: 32px;
width: 460px;
height: 150px;
border-radius: 36px;
box-shadow: 0 7px 8px -4px rgba(0, 0, 0, 0.2), 0 5px 22px 4px rgba(0, 0, 0, 0.12), 0 12px 17px 2px rgba(0, 0, 0, 0.14);
background-color: white;
z-index: 999999;
}
.notification > .border {
background-color: #3fb4e4;
margin-left: 20px;
border-radius: 36px;
width: 34px;
height: 150px;
}
<div class="notification"><div class="border"></div>Hello</div>
But I cant find a way to create the blue border on the left.
Use multiple background like below:
.notification {
border-radius: 36px;
padding:50px;
width:100px;
box-shadow:
0 7px 8px -4px rgba(0, 0, 0, 0.2),
0 5px 22px 4px rgba(0, 0, 0, 0.12),
0 12px 17px 2px rgba(0, 0, 0, 0.14);
/* Relevant code*/
border:3px solid transparent; /* Control the thickness*/
background:
/* Cover only the padding area*/
linear-gradient(#fff,#fff) padding-box,
/* Cover the border area: adjust the 50px to control the size */
linear-gradient(to right, #3fb4e4 50px,transparent 0) border-box;
}
<div class="notification">Hello</div>
Another syntax where you can control the size outside the gradient:
.notification {
border-radius: 36px;
padding:50px;
width:100px;
box-shadow:
0 7px 8px -4px rgba(0, 0, 0, 0.2),
0 5px 22px 4px rgba(0, 0, 0, 0.12),
0 12px 17px 2px rgba(0, 0, 0, 0.14);
/* Relevant code*/
border:3px solid transparent; /* Control the thickness*/
background:
/* Cover only the padding area*/
linear-gradient(#fff,#fff) padding-box,
/* Cover the border area */
linear-gradient(#3fb4e4,#3fb4e4) left border-box no-repeat;
background-size:50px 100%;
transition:0.6s;
}
.notification:hover {
background-size: 100px 100%;
}
<div class="notification">Hello</div>
Why not just add a border on the container itself:
.notification {
position: fixed;
top: 32px;
right: 32px;
width: 460px;
height: 150px;
border-radius: 36px;
box-shadow: 0 7px 8px -4px rgba(0, 0, 0, 0.2), 0 5px 22px 4px rgba(0, 0, 0, 0.12), 0 12px 17px 2px rgba(0, 0, 0, 0.14);
background-color: white;
z-index: 999999;
border-left: 3px solid #3fb4e4;
}
I am trying a simple animation of div which animates when page loads. Below you can see the GIF of the animation.
Here is the code
#keyframes newActivity{
to{
position: fixed;
z-index: 100;
top: 18%;
left: 10%;
width:70%;
height:80%;
}
}
.div:first-child {
animation-name:newActivity;
animation-duration:5s;
}
div {
width: 290px;
height:200px;
float:left;
margin-right: 10px;
margin-bottom: 10px;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 5px rgba(0, 0, 0, 0.06);
-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 5px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 5px rgba(0, 0, 0, 0.06);
background-color:red;
border: 1px solid #BCBCBC;
overflow:hidden;
z-index:-10;
}
<div class='div'></div>
You can see that first it increases the width and adjust position and increase the height(Without animating it). Why is this happening? I want to animate all of these properties simultaneously.
This is happening because you have set the to height as a percentage, but height percentages are inherited; they only work when the parent element has a declared height.
Only the viewport has an inherent height set, so if you want to use height: 80% on your div, then you need to also set html, body { height: 100%; } in your CSS. The html element is the child of the viewport, and body is the child of html. This way, your div's height: 80%; can inherit all the way up through body and html to the viewport. See this example:
html, body {
height: 100%;
}
#keyframes newActivity {
to {
position: fixed;
z-index: 100;
top: 18%;
left: 10%;
width: 70%;
height: 80%;
}
}
.div:first-child {
animation-name: newActivity;
animation-duration: 5s;
}
div {
width: 290px;
height: 200px;
float: left;
margin-right: 10px;
margin-bottom: 10px;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 5px rgba(0, 0, 0, 0.06);
-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 5px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 5px rgba(0, 0, 0, 0.06);
background-color: red;
border: 1px solid #BCBCBC;
overflow: hidden;
z-index: -10;
}
<div class="div"></div>
P.S. position is not a valid animation property. See a list of valid properties here on the Mozilla Developer Network.
P.P.S. if you want the animation to retain its state at the end, you can use animation-fill-mode: forwards;.
Here's a JsFiddle.
I have an transformed image and I would like to add a gradient (black to transparant) on it.
HTML :
<div class="contentwrap">
<div class="perspectiveDiv">
<img src="http://image.noelshack.com/fichiers/2014/34/1408372755-black-card.png" class="img" />
</div>
</div>
CSS :
.contentwrap {
margin: 0 auto;
max-width: 600px;
height: 100%;
display: table;
padding-top: 150px;
}
.perspectiveDiv{
perspective:750px;
position: relative;
left: 0;
top: 0;
}
.img{
position: absolute;
top: -152px;
left: 25px;
transform: rotateX(60deg);
max-width: 250px;
-webkit-box-shadow: 0 8px 6px -6px rgba(0, 0, 0, 0.8);;
-moz-box-shadow: 0 8px 6px -6px rgba(0, 0, 0, 0.8);;
box-shadow: 0 60px 45px -20px rgba(0, 0, 0, 0.8);;
-moz-border-radius: 15px;
border-radius: 16px;
background: linear-gradient(to bottom, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
}
Here is the kind of result that I need (made with photoshop) :
I found how to apply a gradient on a background image, but not a standard image...
Is it possible to do what I need ?
Can you help me to do it ? It could be very simple but I'm a beginner and I didn't manage to do it...
I am using the same CSS sheet for all the html pages on our website.
This is the CSS container:
#Container {
position: relative;
top: 5px;
width: 1000px;
height: 600px;
margin: 0 auto 0;
background: #FFF;
-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 10px rgba(0, 0, 0, 0.1) inset;
-moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 10px rgba(0, 0, 0, 0.1) inset;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 10px rgba(0, 0, 0, 0.1) inset;
border-color: #CCC;
-moz-border-radius: 0px 0px 20px 20px;
border-radius: 0px 0px 20px 20px;
}
This is fine on all the pages except one, which needs the height to be 1000px.
How would I make a variation of the code for one page, instead of copying the entire container settings again for the one html page?
On the page in question give the body a class e.g. 'myPage' then add the below to your css
body.mypage #container{
height:1000px;
}
I'm trying to make a couple of css circles with text inside in one line. When I use circle class to img, circles are inline, but I cannot add any text. When I use circle class to div, I can add text, but they don't display inline, even when I add display:inline to circle class.
CSS
img.galeria{
border-style: solid;
border-width: 3px;
border-color: yellow;
width: 12%;
height: 75.825%;
border-radius: 50%;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
box-shadow: 0 0 8px rgba(0,0,0, .8);
-webkit-box-shadow: 0 0 8px rgba(0, 0, 0, .8);
-moz-box-shadow: 0 0 8px rgba(0,0,0, .8);
margin-right: 2%;
}
HTML for the first option (img)
<img class="galeria" src="../images/backgrounds/light-blue.png"/>
HTML for the second option (div)
<div class="galeria"/>text
What am I doing wrong?
In your style, replace display: inline; with display:inline-block;. It worked for me!
Try this
.galeria {
border-style: solid;
border-width: 3px;
border-color: yellow;
width: 50px;
height: 50px;
text-align:center;
line-height:50px;
background:url('...imgsrc.jpg');
border-radius: 50%;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
box-shadow: 0 0 8px rgba(0, 0, 0, .8);
-webkit-box-shadow: 0 0 8px rgba(0, 0, 0, .8);
-moz-box-shadow: 0 0 8px rgba(0, 0, 0, .8);
}
You say that you tried display: inline, but it isn't in your code.
If you try it, it works
.galeria{
border-style: solid;
border-width: 3px;
border-color: yellow;
width: 12%;
height: 75.825%;
border-radius: 50%;
box-shadow: 0 0 8px rgba(0,0,0, .8);
-webkit-box-shadow: 0 0 8px rgba(0, 0, 0, .8);
-moz-box-shadow: 0 0 8px rgba(0,0,0, .8);
margin-right: 2%;
display: inline;
}
demo