I'm trying to achieve a design close to the snippet here. My problem is that I can't find a way to replace the blue background of .title by a simple transparency (so that the container's background stays visible). If I simply remove the blue background, the border becomes visible where .title is.
Also the "title" is generated by JS so I can't reliably predict the length of div as it may slightly vary depending on the situation.
.container {
width: 350px;
height: 250px;
display: flex;
justify-content: center;
align-items: center;
position: relative;
background: url('https://i.pinimg.com/736x/94/90/19/9490199f30fc9db039de091205e73be6--backgrounds-wallpapers-phone-backgrounds.jpg');
}
.zone {
position: relative;
display: flex;
justify-content: center;
align-items: center;
margin: 0 0 20px 0;
text-align: center;
}
.title {
position: relative;
display: flex;
justify-content: center;
align-items: center;
position: absolute;
top: 0;
left: 0;
right: 0;
z-index: 10;
}
.title span {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0 10px;
height: 20px;
color: hsla(200, 70%, 20%, 1);
cursor: default;
background: hsla(200, 70%, 55%, 1);
}
.content {
position: relative;
display: flex;
justify-content: center;
align-items: center;
padding: 30px 30px 20px 30px;
width: 200px;
border: 0.1rem solid hsla(200, 70%, 20%, 1);
border-radius: 0rem;
margin-top: 10px;
}
<div class="container">
<div class="zone">
<div class="title">
<span>Text Title</span>
</div>
<div class="content"></div>
</div>
</div>
Does anyone have an idea how to achieve what I'm trying to do ? Please let me know if my explanation is too brief or unclear.
Thank you !
You can achieve that with pseudo elements. Take a look at this:
.container {
width: 350px;
height: 250px;
display: flex;
justify-content: center;
align-items: center;
position: relative;
background: url('https://i.pinimg.com/736x/94/90/19/9490199f30fc9db039de091205e73be6--backgrounds-wallpapers-phone-backgrounds.jpg');
}
.zone {
position: relative;
display: flex;
justify-content: center;
align-items: center;
margin: 0 0 20px 0;
text-align: center;
}
.title {
position: relative;
display: flex;
justify-content: center;
align-items: center;
position: absolute;
top: 0;
left: 0;
right: 0;
z-index: 10;
}
.title span {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0 10px;
height: 20px;
color: hsla(200, 70%, 20%, 1);
cursor: default;
}
.title span::before,
.title span::after{
content: "";
height: 2px;
position: absolute;
background: hsla(200, 70%, 20%, 1);
width: calc(50% - 40px);
top: 9px;
}
.title span::before{
left: 0;
}
.title span::after{
right: 0;
}
.content {
position: relative;
display: flex;
justify-content: center;
align-items: center;
padding: 30px 30px 20px 30px;
width: 200px;
border-right: 0.1rem solid hsla(200, 70%, 20%, 1);
border-left: 0.1rem solid hsla(200, 70%, 20%, 1);
border-bottom: 0.1rem solid hsla(200, 70%, 20%, 1);
border-radius: 0rem;
margin-top: 10px;
}
<div class="container">
<div class="zone">
<div class="title">
<span>Text Title</span>
</div>
<div class="content"></div>
</div>
</div>
You could try to use a fieldset with a legend instead of a div:
https://jsfiddle.net/v9p60p6g/1/
<html>
<head>
<style>
.container {
width: 350px;
height: 250px;
display: flex;
justify-content: center;
align-items: center;
position: relative;
background: url('https://i.pinimg.com/736x/94/90/19/9490199f30fc9db039de091205e73be6--backgrounds-wallpapers-phone-backgrounds.jpg');
}
fieldset {
border: solid black 2px;
}
legend {
}
</style>
</head>
<body>
<div class="container">
<fieldset>
<legend>Testtitel</legend>
Content
</fieldset>
</div>
</body>
</html>
You can get the desired effect by adding more elements
.container {
width: 350px;
height: 250px;
display: flex;
justify-content: center;
align-items: center;
position: relative;
background: url('https://i.pinimg.com/736x/94/90/19/9490199f30fc9db039de091205e73be6--backgrounds-wallpapers-phone-backgrounds.jpg');
}
.zone {
position: relative;
display: flex;
justify-content: center;
align-items: center;
margin: 0 0 20px 0;
text-align: center;
}
.title {
position: relative;
display: flex;
justify-content: center;
align-items: center;
position: absolute;
top: 0;
left: 0;
right: 0;
z-index: 10;
}
.title__text {
flex: 0 0 auto;
padding: 0 10px;
height: 20px;
color: hsla(200, 70%, 20%, 1);
cursor: default;
/* background: hsla(200, 70%, 55%, 1); */
}
.title__border {
flex: 1;
border-top: 0.1rem solid hsla(200, 70%, 20%, 1);
}
.content {
position: relative;
display: flex;
justify-content: center;
align-items: center;
padding: 30px 30px 20px 30px;
width: 200px;
border: 0.1rem solid hsla(200, 70%, 20%, 1);
border-top: 0.1rem solid transparent;
border-radius: 0rem;
margin-top: 10px;
}
<div class="container">
<div class="zone">
<div class="title">
<span class='title__border'></span>
<span class='title__text'>Text Title</span>
<span class='title__border'></span>
</div>
<div class="content"></div>
</div>
</div>
And don't use selectors like .title span. They do not target specific element and styles used by them cannot be reused somewhere else, which means excessive code duplication. Element selectors (like .title span) are also likely to cause problems (you are selecting all spans in .title element) whenever you change your code (adding another span with different styles is hard), which means even more duplicated code! Duplicated code = more complex code = code that is harder to maintain!
You should get BEM or SMACSS or any other methodology (you may even create your own).
Related
I trying to create this two corner cut div, one is filled , another is border, both with shadow.
However I facing an issue, which is for border shape corner, I unable to create border with corner cut.
I appreciate with any other idea to create this kind of filled shape and border shape.
.buttongroup {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.buttongroup .gap {
width: 30px;
-webkit-box-flex: 0;
-ms-flex: none;
flex: none;
}
.neonbutton {
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
width: 100%;
position: relative;
}
.neonbutton .l {
width: 100%;
height: auto;
background-color: #37E8FC;
}
.neonbutton .r {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
width: 30px;
-webkit-box-flex: 0;
-ms-flex: none;
flex: none;
}
.neonbutton .corner {
width: 0;
height: 0;
border-style: solid;
border-width: 25px 0 0 30px;
border-color: transparent transparent transparent #37E8FC;
}
.neonbutton .square {
height: 30px;
width: 30px;
background-color: #37E8FC;
}
.neonbutton .value {
position: absolute;
width: 100%;
height: 100%;
text-align: center;
color: #000;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
font-size: 17px;
font-weight: bold;
}
.neonbutton.outline .l {
background-color: transparent;
border: 2px solid #37E8FC;
border-right: none;
}
.neonbutton.outline .corner {
background-color: transparent;
}
.neonbutton.outline .square {
background-color: transparent;
border-right: 2px solid #37E8FC;
border-bottom: 2px solid #37E8FC;
}
<div class="buttongroup">
<div class="neonbutton">
<div class="l"></div>
<div class="r">
<div class="corner"></div>
<div class="square"></div>
</div>
<div class="value">Lorem</div>
</div>
<div class="gap"></div>
<div class="neonbutton outline">
<div class="l"></div>
<div class="r">
<div class="corner"></div>
<div class="line"></div>
<div class="square"></div>
</div>
<div class="value">Lorem</div>
</div>
</div>
I would do the first one like below:
.box {
--c:20px; /* control the cut */
font-size: 25px;
padding: 10px 30px;
display: inline-block;
position: relative;
z-index: 0;
filter: drop-shadow(0 0 5px #37E8FC)
}
.box:before {
content: "";
position: absolute;
z-index: -1;
inset: 0;
background: #37E8FC;
clip-path: polygon(0 0, calc(100% - var(--c)) 0, 100% var(--c), 100% 100%, 0 100%);
}
body {
background: #000;
}
<div class="box">some text</div>
And the second one:
.box {
--b:5px; /* control the border */
--c:20px; /* control the cut */
font-size: 25px;
padding: 10px 30px;
display: inline-block;
position: relative;
color:#fff;
z-index: 0;
filter: drop-shadow(0 0 5px #37E8FC)
}
.box:before {
content: "";
position: absolute;
z-index: -1;
inset: 0;
background: linear-gradient(to bottom left, #37E8FC 50%,#0000 50.5%) 100% 0/calc(var(--c) - 0.3*var(--b)) calc(var(--c) - 0.3*var(--b)) no-repeat;
border:var(--b) solid #37E8FC;
clip-path: polygon(0 0, calc(100% - var(--c)) 0, 100% var(--c), 100% 100%, 0 100%);
}
body {
background: #000;
}
<div class="box">some text</div>
Im playing around with buttons and css and I'm wondering if there is a way I can get this paragraph that says (Hover Me) to go under the button using flexbox. Sorry if that's a little too vague or I posted the code wrong, this is my first time. Any pointers or tips for the future are appreciated. Thanks.
/*Makes the background */
#background {
position: absolute;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
z-index: -1;
}
/* Makes the background black when the button is hovered */
#button:hover~#background {
background-color: black;
}
/* Centers the button and the paragraph */
section {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
button {
display: flex;
align-items: center;
justify-content: center;
height: 80px;
width: 40px;
border: 1px solid royalblue;
background-color: skyblue;
transition: 1s;
border-radius: 10px;
margin-right: 15px;
}
button:hover {
background-color: indigo;
color: white;
box-shadow: 3px -4px 10px GREY;
transform: translateY(0.25em);
}
<section>
<button id="button">Lights
<br>Off!</br>
</button>
<p>(Hover Me)</p>
<div id="background"></div>
</section>
Try to add flex-direction: column; in section
/*Makes the background */
#background {
position:absolute;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
z-index: -1;
}
/* Makes the background black when the button is hovered */
#button:hover ~ #background {
background-color: black;
}
/* Centers the button and the paragraph */
section {
height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
button {
display: flex;
align-items: center;
justify-content: center;
height:80px;
width: 40px;
border: 1px solid royalblue;
background-color: skyblue;
transition: 1s;
border-radius: 10px;
margin-right: 15px;
}
button:hover {
background-color: indigo;
color: white;
box-shadow: 3px -4px 10px GREY;
transform: translateY(0.25em);
}
<section>
<button id="button">Lights
<br>Off!</br>
</button>
<p>(Hover Me)</p>
<div id="background"></div>
</section>
I created a ring chart using the code below:
<div class="chart-wrapper">
<figure class="pie-chart" data-percentage="" style="--percentage:70%; --color:gray">
</figure>
</div>
.pie-chart {
background:
radial-gradient(
circle closest-side,
transparent 100%,
white 0
),
conic-gradient(
var(--color) var(--percentage),
rgba($color: green, $alpha: 100) 0,
green 100%
);
position: relative;
width: 40px;
min-height: 40px;
margin: 50px auto;
&:after {
content:attr(data-percentage);
font-size: 3rem;
text-align: center;
justify-content: center;
align-items: center;
display: flex;
line-height:normal;
width: 20px;
height: 20px;
border-radius: 50%;
background-color: white;
position: absolute;
top: 50%;
left: 50%;
transform:translate(-50%, -50%);
}
}
But the result is not so smooth on Chrome(I try it first on Codepen). I think the problem could be coming from the gradient property but i'm not sure. Could somebody please help?:
Use border-radius instead of radial-gradient
.pie-chart {
background:conic-gradient(var(--color) var(--percentage), green 0);
border-radius:50%;
width: 40px;
min-height: 40px;
margin: 50px auto;
justify-content: center;
align-items: center;
display: flex;
}
.pie-chart:after {
content: attr(data-percentage);
font-size: 3rem;
line-height: normal;
width: 20px;
height: 20px;
border-radius: 50%;
background-color: white;
}
<div class="chart-wrapper">
<figure class="pie-chart" data-percentage="" style="--percentage:70%; --color:gray">
</figure>
</div>
I have three 50x50 colored blocks with content R, G, and B. Can these blocks be lined up vertically as would be expected if they were three div elements adjacent to each other?
It is possible if using a margin-bottom that is the same height of the red block but only if the red block does not contain any text. This is because the height of the text gets added to the height of the margin.
Is there a way to make this work with just .red, .red::after, and .blue?
body {
width: 100%;
height: 80vh;
display: flex;
align-items: center;
justify-content: center;
}
.demo-container {
display: flex;
align-items: center;
justify-content: center;
padding: 24px;
border: solid 1px #d5d9dc;
}
.red {
background: pink;
display: block;
min-width: 50px;
height: 50px;
position: relative;
}
.red::after {
content: "G";
background-color: rgba(64, 255, 64, 0.5);
display: block;
min-width: 50px;
height: 50px;
position: relative;
}
.blue {
background-color: rgba(64, 64, 255, 0.5);
display: block;
min-width: 50px;
height: 50px;
position: relative;
}
<!DOCTYPE html>
<div class="demo-container">
<div class="container">
<div class="red">R</div>
<div class="blue">B</div>
</div>
<br/>
</div>
You can add position: relative;height: 100px to .red element.
then add: position: absolute; bottom: 0; to .red:after element
body {
width: 100%;
height: 80vh;
display: flex;
align-items: center;
justify-content: center;
}
.demo-container {
display: flex;
align-items: center;
justify-content: center;
padding: 24px;
border: solid 1px #d5d9dc;
}
.red {
background: pink;
display: block;
min-width: 50px;
height: 100px;
position: relative;
}
.red::after {
content: "G";
background-color: rgba(64, 255, 64, 0.5);
display: block;
min-width: 50px;
height: 50px;
position: absolute;
bottom: 0
}
.blue {
background-color: rgba(64, 64, 255, 0.5);
display: block;
min-width: 50px;
height: 50px;
position: relative;
}
<!DOCTYPE html>
<div class="demo-container">
<div class="container">
<div class="red">R</div>
<div class="blue">B</div>
</div>
<br/>
</div>
I had an icon img and was trying to center it inside a card div but is somehow not working. I already tried text-align: center; and display:flex; justify-content: center; and both did not help. I attached my code below. Any help is appreciated. Thanks in advance.
* {
box-sizing: border-box;
}
.card {
background-color: #fff;
border-radius: 4px;
max-width: 0px;
height: 0px;
position: absolute;
padding: 20px;
color: #444;
cursor: pointer;
top: 3%;
right: 0.5%;
}
.card:before {
content: '';
display: block;
position: absolute;
background-color: #ccc;
left: 20px;
right: 20px;
bottom: 0;
top: 50%;
z-index: -1;
box-shadow: 0 0 40px lighten(#000, 60%);
transition: box-shadow .2s ease-in-out;
}
.card.level-1:hover:before {
box-shadow: 0 0 80px lighten(#000, 60%);
}
.card level-1 img {
display: flex;
justify-content: center;
}
<div class="card level-1">
<img src="https://img.icons8.com/windows/32/000000/microphone--v2.png" />
</div>
You should put flex on the container of the image like this:
.card {
display: flex;
justify-content: center;
align-items: center;
}