Why is there a difference between (scale3d and left) and (scale3d and translate3d)? And how do I calculate the difference between them?
See example: jsBin
div {
position: absolute;
top: 0;
left: 0;
width: 200px;
height: 200px;
background: rgba(0,0,0, .3);
border-radius:7px;
font-size:20px;
-webkit-transform-origin:50% 50%;
}
#t1 {
left: 200px;
-webkit-transform: scale3d(0.5, 0.5, 1);
}
#t2 {
top: 200px;
-webkit-transform: scale3d(0.5, 0.5, 1) translate3d(200px, 0, 0);
}
and the simple HTML:
<div id="t1">scale3d and left</div>
<div id="t2">scale3d and transition3d</div>
CSS3 Transforms alter the local coordinate system. When you scale an element you're also scaling any translations applied to that div. Here - if you change the translate to 400px - you get the same result (reversing the effect of the scale).
You can check what transformations are currently applied to an element by using getComputedStyle().
Related
In other words, preventing children from being affected by parent property
so i tried to rotate these buttons on hover first then other things, but let's focus on hover for now, but the problem is that it rotates the nested img too..
i tried many things to prevent it, but the img kept rotating
best solution so far is rotate it oppositely, I'm not satisfied at all with this solution cause it rotates again on mouse leave
here's some code been using
<div class="h2_2006">
<button class="h2_2601">
<img class="h2_2611" title="Add To Cart" src="https://s.svgbox.net/materialui.svg?ic=add_photo_alternate" alt="Add To Cart">
</button>
<button class="h2_2602">
<img class="h2_2621" title="Watch" src="https://s.svgbox.net/materialui.svg?ic=alarm_add" alt="Watch">
</button>
<button class="h2_2603">
<img class="h2_2631" title="Fav" src="https://s.svgbox.net/materialui.svg?ic=auto_awesome" alt="Add To Favorite">
</button>
</div>
and some scss with failed :after pseudo examples
//scss
.h2_2006 {
#include grid(1fr 1fr 1fr, 1fr);
align-items: center;
grid-gap: 3.3vw;
>button {
justify-content: center;
display: flex;
align-content: center;
max-height: 5.2em;
max-width: 5.2em;
border-radius: 50%;
padding: 0;
border: 0;
transition: all 1s;
position: relative;
&:after {
content: "";
position: absolute;
left: 0;
top: 0;
transition: all .5s ease-in-out;
transform: translateX(-100%) translateY(-25%) rotate(45deg);
}
&:hover:after {
transform: translateX(-9%) translateY(-25%) rotate(45deg);
transition: all 1s;
}
>:not(img) {
pointer-events: auto;
}
}
.h2_2601 {
#include pos(auto, 1, 2, center, center);
background: linear-gradient(134deg, rgb(10, 32, 58) 50%, rgb(15, 48, 87) 50%);
.h2_2611 {
z-index: 1;
outline: none;
transform-origin: 0 0 0;
}
}
.h2_2602 {
#include pos(auto, 1, 3, center, center);
background: linear-gradient(134deg, rgb(15, 48, 87) 50%, rgb(10, 32, 58) 50%);
content: "";
&:hover,
&:focus {
outline: none;
transform: rotate(0.5turn);
transition: transform 1s;
}
.h2_2621:hover {
outline: none;
transform: rotate(-180deg);
transition: transform 1s;
}
}
}
now, idk what have i missed out here cause i'm turnin off already
any help would be much appreciated
In general, a css class affects everything within it. So, if you do not want your svgs to be rotated, you can place the rotating class on something more specific (like adding another div for only those items that need to be rotated, so long as they are just siblings).
If you need a parent in the hierarchy to be rotated, but not the child, then you can specify the counter-style on the child (which you mentioned as a method you would not like to use)
The important thing to understand here is that your svg within the button is like putting a picture on a disc - if you rotate the disc, the picture will appear to rotate too, unless you rotate it in the opposite direction.
Here is an interesting article about different layers of specifying css. Perhaps this can help you find a solution
I have a problem with animations when I pass variables through HTML. My code is :
.falling-star {
width: 10px;
height: 15px;
transform: rotate(45deg);
background: red;
border-radius: 50%;
top: var(--top);
left: var(--left);
position: absolute;
animation: falling-star-animation var(--animationTime) infinite ease-in-out;
}
#keyframes falling-star-animation {
40% {
top: var(--top);
left: var(--left);
background: rgba(255, 255, 255, 0);
}
60% {
background: red;
}
100% {
top: var(--endTop);
background: rgba(255, 255, 255, 0);
left: var(--endLeft);
}
}
<div class="falling-star" style="--top:2vh; --endTop:90vh; --left:50vw; --endLeft:10vw; --animationTime:8s; --animationDelay: 2s;"></div>
<div class="falling-star" style="--top:4vh; --endTop:70vh; --left:90vw; --endLeft:50vw; --animationTime:4s; --animationDelay: .5s;"></div>
<div class="falling-star" style="--top:0; --endTop:50vh; --left:88vw; --endLeft:30vw; --animationTime:3s; --animationDelay: 1s;"></div>
I thought that animations are behind something (lower z-index), but they aren't. When I inspect them in console, then I see that they aren't moving. When I change from variables to static values then the animation is working. Earlier it was working but I probably changed something by accident and I don't know what's this (git history doesn't show any changes in this code).
Okay, i debuged this. Resolve was to remove camel case and type every css variable using only lower case. I don't know why it works like that, but for everyone who will come here in future - this is my solution of this problem :D
I'm looking at creating a Infinity Symbol using CSS, SVG or Canvas.
If you don't know what an infinity symbol is, this is an example:
I have attempted at created the shape but have only managed to create one side of the shape. I would ultimately like to keep this to one element and as simple as possible.
.infinity {
width: 100px;
height: 100px;
border-radius: 50% 50% 0 50%;
border: 5px solid black;
transform: rotate(-45deg);
}
<div class="infinity"></div>
I have found this question:
Infinity symbol with HTML
But i'm looking at using this as an icon or image of some sort and therefore would like a bit more freedom with the shape.
CSS
By using pseudo-elements, you can create both sides of the shape and therefore get the output required.
This solution will be well supported across all browsers.
div {
position: relative;
width: 178px;
height: 100px;
}
div:before,
div:after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 60px;
height: 60px;
border: 10px solid black;
border-radius: 50px 50px 0 50px;
transform: rotate(-45deg);
}
div:after {
left: auto;
right: 0;
border-radius: 50px 50px 50px 0;
transform: rotate(45deg);
}
<div></div>
This is an amended version from here: CSS-Tricks
If you want it more shapely, a bit of amending to the border radius rules really help give it some more shape.
div {
position: relative;
width: 178px;
height: 100px;
}
div:before,
div:after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 60px;
height: 60px;
border: 10px solid black;
border-radius: 80% 0 55% 50% / 55% 0 80% 50%;
transform: rotate(45deg);
}
div:after {
left: auto;
right: 0;
transform: rotate(-135deg);
}
<div></div>
SVG
SVG stands for Scalable Vector Graphic. The web browser views it as an image but you can add text and normal HTML elements within an SVG.
It is well supported across all browsers as viewable here: CanIUse
SVG | MDN
<svg height="150" viewbox="0 50 200 200">
<path fill="none" stroke="#333333" stroke-width="5" d="M100,100
C200,0 200,200 100,100
C0,0 0,200 100,100z" />
</svg>
Canvas
Canvas is similar to SVG but uses a raster (pixel based) instead of a vector to create the shape.
The browser support for Canvas is quite good.
var shape = document.getElementById('infinity').getContext('2d');
shape.lineWidth = 6;
shape.strokeStyle = "#333";
shape.beginPath();
shape.moveTo(100, 100);
shape.bezierCurveTo(200, 0, 200, 200, 100, 100);
shape.bezierCurveTo(0, 0, 0, 200, 100, 100);
shape.closePath();
shape.stroke();
<canvas id="infinity"></canvas>
HTML
As taken from the answer's in the near duplicate, this is an accumulation of all the HTML alternatives.
I've only added this for canonical and to show to users that the shape is possible with HTML entities.
p {
font-size: 2em;
}
<p>∞</p>
<p>∞</p>
<p>∞</p>
<p>∞</p>
I decided to try and create an analog 12 hour clock with some basic CSS properties. I start off by creating a square div of 500px. I then set the border-radius to 250px and get a nice looking circle. After this, I add in the twelve tick marks, position them absolute-ly, and get their corresponding positions.
The angle for each tick mark is based on this (apologies for spelling out the simple math):
12 tick marks
360° in our circle
360 / 12 = 30° angles
The position for each tick mark can be calculated using some basic trigonometry. I know θ (0°, 30°, 60°, etc.) and radius (250), and by using cos and sin, I can figure out the associated top, bottom, left, and right values. To get the left or right value (x), I can simply use: r * sin θ. To get the top or bottom value (y), I can use: r - (r * cos θ). Hopefully the image below (excuse the MS Paint lack of skill) can help clear up what I'm trying to do.
Once I have these equations, it becomes much easier to get the respective x and y values:
θ (angle) | 250 * sin θ [x] | 250 - (250 * cos θ) [y]
--------------------------------------------------------------
30° (1:00) | right: 125px | top: 33.5px
60° (2:00) | right: 33.5px | top: 125px
90° (3:00) | right: 0px | top: 250px
120° (4:00) | right: 33.5px | bottom: 125px
150° (5:00) | right: 125px | bottom: 33.5px
180° (6:00) | right: 250px | bottom: 0px
210° (7:00) | left: 125px | bottom: 33.5px
240° (8:00) | left: 33.5px | bottom: 125px
270° (9:00) | left: 0px | bottom: 250px
300° (10:00) | left: 33.5px | top: 125px
330° (11:00) | left: 125px | top: 33.5px
360° (12:00) | left: 250px | top: 0px
Now that I've dragged the question on for far too long... my question is, why would my tick marks for 2, 3, 4, 8, 9, and 10 all be a bit off? Based on my calculations (I've always wanted to say that), I shouldn't be having these issues. Sure, I did some rounding and left off some sig figs, but they are not that significant to make the positioning look wonky. Here is my code:
The HTML
<body>
<div id="clock">
<div id="one" class="oneEleven tick"></div>
<div id="two" class="twoTen tick"></div>
<div id="three" class="threeNine tick"></div>
<div id="four" class="fourEight tick"></div>
<div id="five" class="fiveSeven tick"></div>
<div id="six" class="sixTwelve tick"></div>
<div id="seven" class="fiveSeven tick"></div>
<div id="eight" class="fourEight tick"></div>
<div id="nine" class="threeNine tick"></div>
<div id="ten" class="twoTen tick"></div>
<div id="eleven" class="oneEleven tick"></div>
<div id="twelve" class="sixTwelve tick"></div>
</div>
</body>
The CSS
#clock {
height: 500px;
width: 500px;
border-radius: 50%;
border: 1px solid black;
position: relative;
}
.tick {
background-color: black;
height: 20px;
width: 5px;
position: absolute;
}
.oneEleven {
/* ~6.7% */
top: 33.5px;
}
.twoTen {
/* 25% */
top: 125px;
}
.threeNine {
/* 50% */
top: 250px;
}
.fourEight {
/* 25% */
bottom: 125px;
}
.fiveSeven {
/* ~6.7% */
bottom: 33.5px;
}
#one {
right: 125px;
transform: rotate(30deg);
}
#two {
/* ~93.3% */
right: 33.5px;
transform: rotate(60deg);
}
#three {
right: 0px;
transform: rotate(90deg);
}
#four {
right: 33.5px;
transform: rotate(120deg);
}
#five {
right: 125px;
transform: rotate(150deg);
}
#six {
left: 250px;
bottom: 0px;
}
#seven {
left: 125px;
transform: rotate(-150deg);
}
#eight {
left: 33.5px;
transform: rotate(-120deg);
}
#nine {
left: 0px;
transform: rotate(-90deg);
}
#ten {
left: 33.5px;
transform: rotate(-60deg);
}
#eleven {
left: 125px;
transform: rotate(-30deg);
}
#twelve {
left: 250px;
top: 0px;
}
The jsFiddle. It's not entirely obvious on first glance, but if you look at the tick marks I've referenced, you'll see they're not lined up on the circle. I'm eventually going to move to percentages, but I would like to know why they're off, and is this the best approach for creating a circle that you'd like to add styling too? I realize there's the HTML5 canvas tag, but I feel like that would be too difficult to work with and would be doing more processing than I need to perform...
Any help would be appreciated!
It looks like you've positioned each tick to get one corner in the right position on the circle. But then the tick gets rotated about the origin, which pushes part of it outside the circle. You should be able to fix it by setting transform-origin appropriately for each tick. You need to rotate about the same corner you've positioned. So if you positioned with top and right, set the transform-origin to "top right". For example:
#two {
/* ~93.3% */
right: 33.5px;
transform: rotate(60deg);
transform-origin: top right;
}
This question already has answers here:
How do I reduce the opacity of an element's background using CSS?
(29 answers)
Closed yesterday.
I want to make the list menu's background disappear by using opacity, without affecting the font. Is it possible with CSS3?
now you can use rgba in CSS properties like this:
.class {
background: rgba(0,0,0,0.5);
}
0.5 is the transparency, change the values according to your design.
Live demo http://jsfiddle.net/EeAaB/
more info http://css-tricks.com/rgba-browser-support/
Keep these three options in mind (you want #3):
1) Whole element is transparent:
visibility: hidden;
2) Whole element is somewhat transparent:
opacity: 0.0 - 1.0;
3) Just the background of the element is transparent:
background-color: transparent;
To achieve it, you have to modify the background-color of the element.
Ways to create a (semi-) transparent color:
The CSS color name transparent creates a completely transparent color.
Usage:
.transparent{
background-color: transparent;
}
Using rgba or hsla color functions, that allow you to add the alpha channel (opacity) to the rgb and hsl functions. Their alpha values range from 0 - 1.
Usage:
.semi-transparent-yellow{
background-color: rgba(255, 255, 0, 0.5);
}
.transparent{
background-color: hsla(0, 0%, 0%, 0);
}
As of the CSS Color Module Level 4, rgb and hsl works the same way as rgba and hsla does, accepting an optional alpha value. So now you can do this:
.semi-transparent-yellow{
background-color: rgb(255, 255, 0, 0.5);
}
.transparent{
background-color: hsl(0, 0%, 0%, 0);
}
The same update to the standard (Color Module Level 4) also brought in support for space-separated values:
.semi-transparent-yellow{
background-color: rgba(255 255 0 / 0.5);
}
.transparent{
background-color: hsla(0 0% 0% / 0);
}
I'm not sure why would these two be any better than the old syntax, so consider using the a-suffixed, comma-separated variants for greater support.
Besides the already mentioned solutions, you can also use the HEX format with alpha value (#RRGGBBAA or #RGBA notation).
That's contained by the same CSS Color Module Level 4, so it has worse support than the first two solutions, but it's already implemented in larger browsers (sorry, no IE).
This differs from the other solutions, as this treats the alpha channel (opacity) as a hexadecimal value as well, making it range from 0 - 255 (FF).
Usage:
.semi-transparent-yellow{
background-color: #FFFF0080;
}
.transparent{
background-color: #0000;
}
You can try them out as well:
transparent:
div {
position: absolute;
top: 50px;
left: 100px;
height: 100px;
width: 200px;
text-align: center;
line-height: 100px;
border: 1px dashed grey;
background-color: transparent;
}
<img src="https://via.placeholder.com/200x100">
<div>
Using `transparent`
</div>
hsla():
div {
position: absolute;
top: 50px;
left: 100px;
height: 100px;
width: 200px;
text-align: center;
line-height: 100px;
border: 1px dashed grey;
background-color: hsla(250, 100%, 50%, 0.3);
}
<img src="https://via.placeholder.com/200x100">
<div>
Using `hsla()`
</div>
rgb():
div {
position: absolute;
top: 50px;
left: 100px;
height: 100px;
width: 200px;
text-align: center;
line-height: 100px;
border: 1px dashed grey;
background-color: rgb(0, 255, 0, 0.3);
}
<img src="https://via.placeholder.com/200x100">
<div>
Using `rgb()`
</div>
hsla() with space-separated values:
div {
position: absolute;
top: 50px;
left: 100px;
height: 100px;
width: 200px;
text-align: center;
line-height: 100px;
border: 1px dashed grey;
background-color: hsla(70 100% 50% / 0.3);
}
<img src="https://via.placeholder.com/200x100">
<div>
Using `hsla()` with spaces
</div>
#RRGGBBAA:
div {
position: absolute;
top: 50px;
left: 100px;
height: 100px;
width: 200px;
text-align: center;
line-height: 100px;
border: 1px dashed grey;
background-color: #FF000060
}
<img src="https://via.placeholder.com/200x100">
<div>
Using `#RRGGBBAA`
</div>
yes, thats possible. just use the rgba-syntax for your background-color.
.menue {
background-color: rgba(255, 0, 0, 0.5); //semi-transparent red
}
Here is an example class using CSS named colors:
.semi-transparent {
background: yellow;
opacity: 0.25;
}
This adds a background that is 25% opaque (colored) and 75% transparent.
CAVEAT
Unfortunately, opacity will affect then entire element it's attached to.
So if you have text in that element, it will set the text to 25% opacity too. :-(
The way to get past this is to use the rgba or hsla methods to indicate transparency* as part of your desired background "color". This allows you to specify the background transparency*, independent from the transparency of the other items in your element.
Technically we're setting the opacity, though we often like to speak/think in terms of transparency. Obviously they are related, inverses of each other, so setting one decides the other.
The number specified is the opacity %. 1 is 100% opaque, 0% transparent & vice versa).
Here are 3 ways to set a blue background at 75% opacity (25% transparent), without affecting other elements:
background: rgba(0%, 0%, 100%, 0.75)
background: rgba(0, 0, 255, 0.75)
background: hsla(240, 100%, 50%, 0.75)
In this case background-color:rgba(0,0,0,0.5); is the best way.
For example: background-color:rgba(0,0,0,opacity option);
Try this:
opacity:0;
For IE8 and earlier
filter:Alpha(opacity=0);
Opacity Demo from W3Schools
Yes you can just plain text as
.someDive{
background:transparent
}
For your case, we can use rgba():
First, we manipulate the background-color, and use rgba.
.selector {
background-color: rgba(0, 0, 0, 0.3);
}
Now what this does is, it basically adds an opacity to your element, along with the black background color. This is how it'd look when you run it.
body {background-color: #0008f3;}
.container {
height: 100px;
width: 100px;
background-color: rgba(255,255,255,0.5);
}
<body>
<div class="container"></div>
</body>
full transparent -> .youClass{background: rgba(0,0,0,0.001);}