I'm trying to create a bar graph with HTML/CSS and I'm having trouble with CSS's scale property. Here's my code so far:
.main {
position: absolute;
top: 350px;
width: 80%;
height: 65%;
background-color: #1d1d1d;
border: 20px #3f3f3f solid;
left: 50%;
transform: translate(-50%, 0);
}
.bar {
position: relative;
display: inline-block;
width: 30px;
margin-left: 1.1%;
background-color: #38ff90;
border-top: 5px #1d6d41 solid;
border-left: 5px #1d6d41 solid;
border-right: 5px #1d6d41 solid;
transform-origin: bottom;
transform: scaleY(10);
}
.bar-height {
position: relative;
display: inline-block;
opacity: 0;
}
<div class="main">
<div style="height: 100%;" class="bar-height"></div>
<div style="height: <?php echo $height ?>px;" class="bar"> </div>
</div>
When I use scale(), this ends up scaling the border on each bar. How can I scale the bar element without scaling the border?
You've some examples here:
note that it's usually done with SCSS or JS /any JS framework.
https://codepen.io/Victa/pen/xDqbf
https://codepen.io/dxdc100xp/pen/WwMQwE
https://codepen.io/baletsa/pen/oHcfr
the code provided is only to see the logic and the procedure for reach this. SCSS is a good option and not too difficult to use it's like CSS on steroids.
Related
I want to achieve this kind of Layout using Css Transform or gradient Background?(see image below). Right now im stuck with it using conic-gradient, i dont know how to put a gradient background on it.
see snippet below. run the code snippet as fullpage.
Thanks Guys.
//gol-bg
.my-bg-image {
background: url("https://via.placeholder.com/728x90.png?text=Background-image+Backgground-image+Background-image") 0 0 / cover no-repeat;
}
.gol-bg {
display: block;
height: 200px;
width: 700px;
position: relative;
background: conic-gradient(
transparent 136deg, transparent 0 140deg, yellow 140deg);
.my-content {
position: relative;
z-index: 1;
}
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="bg-dark my-bg-image">
<div class="row no-gutters">
<div class="col-6">
<div class="gol-bg">
<div class="my-content">content</div>
</div>
</div>
</div>
</div>
I'm not sure if i understood your question correctly but
Yes, you can use multiple transforms
(Also, take a look at this:
https://bennettfeely.com/clippy/)
Here's an example:
div {
height: 100px;
width: 100px;
background: #000;
color: #fff;
margin: 5em auto; /* Just to center it a bit */
/* Transform part */
transform: scale(2) rotate(90deg);
}
<div>Hello World</div>
this may not be the answer you are looking for but you can do this too. CSS is capable of making all sorts of shapes.
.my-bg-image {
background: url("https://via.placeholder.com/728x90.png?text=Background-image+Backgground-image+Background-image") 0 0 / cover no-repeat;
}
.gol-bg {
display: block;
position: relative;
width: 250px;
height: 0px;
border-left: 50px solid red;
border-right: 50px solid red;
border-bottom: 100px solid red;
border-top: 100px solid red;
position: relative;
}
.gol-bg:after {
content: '';
position: absolute;
background: transparent linear-gradient(91deg, #02b3bc 0, #171c8f 100%) 0 0 no-repeat padding-box;
width: 0;
height: 0;
border-left: 250px solid transparent;
border-right: 100px solid transparent;
border-bottom: 100px solid red;
position: absolute;
content: "";
top: 0px;
left: -50px;
}
.gol-bg .my-content {
position: relative;
z-index: 1;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="bg-dark my-bg-image">
<div class="row no-gutters">
<div class="col-6">
<div class="gol-bg">
<div class="my-content">content</div>
</div>
</div>
</div>
</div>
I am making a website and made a shape as a background with an after. Before the background i want some text. I made 2 divs, and within those divs i made two paragraphs. I set the paragraphs to display flex, and to justify space around so they are seperated in 2 blocks in one row. What happens: in Chrome and Firefox everything is oke. In Safari, the last paragraph just disappears. Trying to set z-index doesn't work, or i am doing something wrong.
Can you help me?
Thanks!
I also made a codepen for this: https://codepen.io/Dehv27/pen/OKmByy
Thanks in advance for the help!
HTML
<section class="intro">
<div class="text textblok1">
<p>Test</p>
<p>Test</p>
</div>
<div class="text textblok2">
<p>Test</p>
<p>Test</p>
</div>
</section>
CSS / SCSS:
section.intro{
width: 100%;
margin-top: 3rem;
height: 620px;
&:after{
content: '';
position:absolute;
height: 300px;
overflow: hidden;
top: 0;
right:0;
bottom:0;
left:0;
z-index: -1;
background: #3fb9bc;
transform: perspective(1366px) rotateY(-12deg) scale(1.6);
border-top: 2px solid black;
border-bottom: 2px solid black;
}
.text{
display: flex;
justify-content: space-between;
width: 80%;
margin: 0 auto;
p{
width: 45%;
span{
text-decoration: underline;
}
}
}
.textblok1{
padding-top: 6rem;
transform: rotate(-2deg);
}
.textblok2{
padding-top: 8rem;
transform: rotate(2.2deg);
}
}
It's something wrong with rotate and scale. If I remove perspective and change rotateY to simple rotate, it will work without any issues (here is my codepen example):
section.intro{
width: 100%;
margin-top: 3rem;
height: 620px;
&:after{
content: '';
position:absolute;
height: 300px;
overflow: hidden;
top: 0;
right:0;
bottom:0;
left:0;
z-index: -1;
background: #3fb9bc;
transform: rotate(5deg) scale(1.8); //this line is changed and result is the same but no errors in Safari now!
border-top: 2px solid black;
border-bottom: 2px solid black;
}
I'm not even sure this is possible, I'm looking to make a see-trough "border"/cut-out around an element. Like in the image below, the point is to make the background show between the magenta element in the centre and the grey elements.
So far all I have managed is a solid colour border around the magenta element. Using the following class, this gives me the desired result but only on a white background.
.app.center {
height: 40px;
width: 28px;
z-index: 5000;
border-radius: 3px;
box-shadow: 0 0 0 3px white;
}
See this fiddle for my entire CSS.
Setting a transparent border as suggested in the comments does not solve my problem (tested in FF40). I am trying to create a transparent gap around my middle div element (the magenta one). Setting a transparent border on this element does not work.
I am looking for a way to clip the sibling divs that fall behind the middle div so a small piece of the background is visible on either side of the middle element that follows the edge/shape of the centre element.
Yes, this is basically impossible. That's why I am trying to provide an answer :-)
My solution will not work on IE, and limits you to use primary colors in the elements. As far as I know, it's the only way to get this result.
The trick is to use a blend mode, that translates gray into transparent. And the borders of the element will be gray, so will show the underlying background
.bkg {
width: 200px;
height: 200px;
border: solid 1px black;
background-image: repeating-linear-gradient(45deg, white 0px, lightblue 40px);
}
.button {
width: 100px;
height: 100px;
border-radius: 20%;
border: solid 10px gray;
position: absolute;
font-size: 80px;
}
#bt1 {
left: 40px;
top: 20px;
background-color: red;
}
#bt2 {
left: 80px;
top: 90px;
background-color: rgb(255,0,255);
}
.panel {
position: absolute;
top: 0px;
width: 200px;
height: 200px;
mix-blend-mode: hard-light;
}
<div class="bkg"></div>
<div class="panel">
<div class="button" id="bt1">-1-</div>
<div class="button" id="bt2">-2-</div>
</div>
If your purpose could be met with a "faux"-transparency, then you could make use of the border-image. However, this is not a true solution. Also, you would lose border-radius when you use a border-image.
The trick is to use as border-image the same image that you use for your background-image on lower-layer div or body. This will give the "illusion" of transparency clipping through the sibling divs which are at a lower-level.
Example:
* { box-sizing: border-box; }
body { background-image: url(http://i.stack.imgur.com/lndoe.jpg); }
.sphere {
position: relative; background-color: #444;
left: 200px; top: 100px; height: 100px; width: 200px;
border-top-right-radius: 100px; border-top-left-radius: 100px;
text-align: center; padding-top: 10px; color: white;
}
.app {
position: absolute; transform-origin: center 75px; background: #cc4489;
border-radius: 5px; left: 72px; top: -72px; height: 64px; width: 52px;
}
div.sphere > .app:first-child {
transform: scale(0.9) rotate(-30deg);
background: #adabae; top: -72px;
}
div.sphere > .app:last-child {
transform: scale(0.9) rotate(30deg);
background: #79787a; top: -72px;
}
.app.center {
height: 64px; width: 52px; z-index: 5000;
background-clip: padding-box; background-origin: padding-box;
border-image: url(http://i.stack.imgur.com/lndoe.jpg) 10;
border-width: 5px;
}
<div class=" sphere">
<div class="app"></div>
<div class="app center">3</div>
<div class="app"></div>
</div>
Fiddle: http://jsfiddle.net/abhitalks/aoh8vc8v/
As applied to your fiddle: http://jsfiddle.net/abhitalks/L6deaazy/3/
Disclaimer: This is faux clipping. clip-path and mask could be better put to use.
I am trying to achieve this effect in my webpage..
The red box is where I will be placing a menu, I would like the bottom of the red box to be slanted. The section on the right of the slant needs to be transparent as there may be an image in the background where the grey color is.
The only thing I can come up with is to rotate the element but that would also rotate the contents of the element which I do not want.. Only the bottom bg of the red element (which will be a solid color) should be slanted.
you can do it like that, just highlighted the rotated part blue, that you see what happens ;)
you might have to play with the top: and left: values if you change the size
edit: added a small menu example (really small ^^)
jsfiddle link
here is the html part:
<div id="menucontainer">
<ul>
<li>some</li>
<li>menu</li>
<li>here</li>
</ul>
</div>
<div id="rotatedDiv">
</div>
<div id="background"></div>
and here the css part:
#menucontainer{
position: relative;
z-index: 100;
background: red;
height: 100px;
}
#menucontainer ul {
position: absolute;
bottom: 0px;
left: 30px;
}
#menucontainer li {
list-style: none;
margin-left: 10px;
background: #123;
display: inline-block;
}
#rotatedDiv {
z-index: 99;
background: blue;
position: absolute;
top: 14px;
left: -5px;
height: 90px;
width: 200%;
-moz-transform: rotate(-2deg);
-webkit-transform: rotate(-2deg);
-o-transform: rotate(-2deg);
-ms-transform: rotate(-2deg);
transform: rotate(-2deg);
}
#background {
background: green;
}
you might want to modify it in any way you can think of, but the main part should be clear i think ;)
You can do it with a transparent border:
html
<div class="bgone">
<div class="content">This is where the menu would go.</div>
</div>
<div class="bgtwo"></div>
css
.bgone {
height: 100px;
background: black;
position: relative;
}
.bgtwo {
height: 50px;
border-top: 100px solid black;
border-right: 1000px solid transparent;
}
.content {
position: absolute;
top: 10px;
left: 10px;
color: #FFF;
}
This question already has answers here:
How to draw circle in html page?
(19 answers)
Closed 7 years ago.
Is it possible to draw circle using css only which can work on most of the browsers (IE,Mozilla,Safari) ?
Yep, draw a box and give it a border radius that is half the width of the box:
#circle {
background: #f00;
width: 200px;
height: 200px;
border-radius: 50%;
}
Working demo:
http://jsfiddle.net/DsW9h/1/
#circle {
background: #f00;
width: 200px;
height: 200px;
border-radius: 50%;
}
<div id="circle"></div>
You could use a .before with a content with a unicode symbol for a circle (25CF).
.circle:before {
content: ' \25CF';
font-size: 200px;
}
<span class="circle"></span>
I suggest this as border-radius won't work in IE8 and below (I recognize the fact that the suggestion is a bit mental).
Create a div with a set height and width (so, for a circle, use the same height and width), forming a square
add a border-radius of 50% which will make it circular in shape. (note: no prefix has been required for a long time)
You can then play around with background-color / gradients / (even pseudo elements) to create something like this:
.red {
background-color: red;
}
.green {
background-color: green;
}
.blue {
background-color: blue;
}
.yellow {
background-color: yellow;
}
.sphere {
height: 200px;
width: 200px;
border-radius: 50%;
text-align: center;
vertical-align: middle;
font-size: 500%;
position: relative;
box-shadow: inset -10px -10px 100px #000, 10px 10px 20px black, inset 0px 0px 10px black;
display: inline-block;
margin: 5%;
}
.sphere::after {
background-color: rgba(255, 255, 255, 0.3);
content: '';
height: 45%;
width: 12%;
position: absolute;
top: 4%;
left: 15%;
border-radius: 50%;
transform: rotate(40deg);
}
<div class="sphere red"></div>
<div class="sphere green"></div>
<div class="sphere blue"></div>
<div class="sphere yellow"></div>
<div class="sphere"></div>
border radius is good option, if struggling with old IE versions then try HTML codes
•
and use css to change color. Output:
•
This will work in all browsers
#circle {
background: #f00;
width: 200px;
height: 200px;
border-radius: 50%;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
}
yup.. here's my code:
<style>
.circle{
width: 100px;
height: 100px;
border-radius: 50%;
background-color: blue
}
</style>
<div class="circle">
</div>