I have been trying to add a title border with CSS. but I can't find the actual result.
.widget-title {
font-size: 1em;
border-bottom: 1px solid red;
margin-bottom: 30;
text-decoration: underline;
text-underline-offset: 1rem;
padding-bottom: 0.5rem;
text-decoration-thickness: 0.1875rem;
text-decoration-color: green;
color: black;
}
<h1 class="widget-title"> Widget title </h1>
For gray line, you have to use ::before element, hope its works
.widget-title {
font-size: 1em;
margin-bottom: 0;
color: black;
position: relative;
width: 33.33%
}
.widget-title span{
display: inline-block;
position: relative;
padding-bottom: 15px;
}
.widget-title:before{
content: "";
position: absolute;
left: 0;
bottom: 2px;
width: 100%;
background: #ccc;
z-index: -1;
height: 2px;
}
.widget-title span:before{
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 100%;
background: blue;
z-index: -1;
height: 6px;
border-radius: 20px;
}
.d-flex{
display: flex;
gap: 30px
}
<div class="d-flex">
<h1 class="widget-title"> <span>Widget title</span></h1>
<h1 class="widget-title"> <span>Title sm</span></h1>
<h1 class="widget-title"> <span>Widget title long</span></h1>
</div>
.widget-title {
border-bottom: 1px solid #000;
padding: 0 0 5px;
}
Steps:
1)Add border-bottom.
2)Change the padding-bottom.
This will work. Thanks.
Related
Is it possible to style the following HTML structure to the image shown below with CSS only?
<div class="xyz-dialog">
<div class="title"><span> Tip Title</span></div>
<div class="body"> <span>Description</span></div>
</div>
Required design:
You can do it as below if we can add a container div in the HTML:
.container{
background: gray;
padding: 16px 10px;
width:max-content;
}
.xyz-dialog {
background: white;
padding: 1rem;
border-radius: 8px;
position: relative;
width: 300px;
}
.xyz-dialog::after {
content: "";
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-top: 10px solid white;
position: absolute;
top: 100%;
}
.body {
margin-top:8px;
color: gray;
font-size: 15px
}
<div class= "container">
<div class="xyz-dialog">
<div class="title"><span> Tip Title</span></div>
<div class="body"> <span>Description</span></div>
</div>
You can do it as below if we cannot touch the HTML structure:
.xyz-dialog {
padding: 1rem;
border-radius: 8px;
position: relative;
width: 300px;
}
.xyz-dialog::after {
content: "";
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-top: 10px solid white;
position: absolute;
top: calc(100% -1rem);
left: 2rem;
}
.xyz-dialog::before {
content: "";
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background: gray;
z-index: -1;
}
.title {
padding: 1rem;
background: white;
border-radius: 10px 10px 0 0;
margin: 0 0 -5px 0;
}
.body {
color: gray;
font-size: 15px;
background: white;
margin: 0;
padding: 1rem;
border-radius: 0 0 10px 10px;
}
<div class="xyz-dialog">
<div class="title"><span> Tip Title</span></div>
<div class="body"> <span>Description</span></div>
</div>
You can use after and border.
.xyz-dialog::after{
content: "";
border-top: 12px solid #f1f1f1;
border-right: 8px solid transparent;
border-left: 8px solid transparent;
position: absolute;
bottom: -12px;
left: 4%;
}
.xyz-dialog{
width: 50%;
background: #f1f1f1;
border-radius: 0.3em;
padding: 5px 30px;
position: relative;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
box-sizing: border-box;
flex-direction: column;
}
<div class="xyz-dialog">
<div class="title"><span> Tip Title</span></div>
<div class="body"> <span>Description</span></div>
</div>
Little late. Two Boxes. For the small noise you use the css pseudo class after.
body {
background-color: #999;
}
.wrapper {
padding:20px;
}
h3 {
margin:0;
color: #000;
}
.bubble {
position: relative;
background: white;
color: #999;
font-family: Arial;
font-size: 16px;
text-align: left;
width: 250px;
height: 120px;
border-radius: 10px;
padding: 0px;
}
.bubble:after {
content: '';
position: absolute;
display: block;
width: 0;
z-index: 1;
border-style: solid;
border-width: 0 20px 20px 0;
border-color: transparent #fff transparent transparent;
bottom: -16px;
left: 17%;
margin-left: -10px;
}
<div class="bubble">
<div class="wrapper">
<h3>title</h3>
<div>content</div>
</div>
</div>
I have no idea what this is called but I want to build this nav the way it is on the picture I came pretty far using tailwind and custom css, but I'm stuck.
Does anyone know what this is called (to update the title) and how to build it?
My attempt:
.active::before {
content: "";
position: absolute;
background-color: transparent;
border-color: white;
border-width: 0 0.5rem 0.5rem 0;
width: 2rem;
height: 2rem;
right: -0.5rem;
border-radius: 0 0 100% 0;
top: -1.5rem;
}
.active::after {
content: "";
position: absolute;
background-color: transparent;
border-color: white;
border-width: 0.5rem 0.5rem 0 0;
width: 2rem;
height: 2rem;
right: -0.5rem;
border-radius: 0 100% 0 0;
bottom: -1.5rem;
}
.active-link {
display: flex;
justify-content: center;
align-items: center;
background-color: white;
border-top-left-radius: 10rem;
border-bottom-left-radius: 10rem;
width: 5rem;
height: 2rem;
}
<link href="https://unpkg.com/tailwindcss#^1.0/dist/tailwind.min.css" rel="stylesheet" />
<nav class="w-32 h-64 bg-indigo-900 rounded-xl">
<div class="flex flex-col items-center justify-between h-full py-12">
<div>
Title
</div>
<div class="w-full">
<ul class="flex flex-col items-center space-y-12 w-full">
<li class="w-full flex justify-center relative active">
<nuxt-link :to="menuItem.target" class="active-link">
<i class="text-black">Icon</i>
</nuxt-link>
</li>
</ul>
</div>
<div>
<i>Icon</i>
</div>
</div>
</nav>
This may be easier if all you need to do is add a classname to the selected element (as opposed to modifying the DOM structure whenever a new item in the navbar is clicked).
The following achieves this:
let nav = document.getElementsByClassName('navbar')[0];
for (let item of document.getElementsByClassName('item')) {
item.addEventListener('click', () => {
let selected = nav.querySelector('.item.selected');
if (selected) selected.classList.remove('selected');
item.classList.add('selected');
});
}
body { font-family: monospace; }
.navbar {
position: absolute;
left: 0; top: 0;
width: 60px; height: 100%;
padding-left: 10px;
background-color: rgba(70, 0, 170);
overflow: hidden;
}
.item {
position: relative;
height: 60px; line-height: 60px;
color: #fff;
text-align: center;
z-index: 1;
cursor: pointer;
}
.item.selected {
background-color: #fff;
border-radius: 100%;
color: #000;
}
.item.selected::before,
.item.selected::after {
content: ' '; display: block;
position: absolute;
left: 0; width: 100%; height: 100%;
pointer-events: none;
border-radius: 100%;
border: 50px solid rgba(0, 0, 0, 0);
border-right: 50px solid #fff;
margin-left: -50px;
z-index: -1;
}
.item.selected::before { bottom: 100%; margin-bottom: -50px; transform: rotate(45deg); }
.item.selected::after { top: 100%; margin-top: -50px; transform: rotate(-45deg); }
<div class="navbar">
<div class="item">(1)</div>
<div class="item">(2)</div>
<div class="item selected">(3)</div>
<div class="item">(4)</div>
</div>
That snippet is interactive, so try clicking menu items!
Note that the rounding is also very similar to the image you displayed, since we are using true circle radii.
The trick here is to add ::before and ::after elements to the selected item, and apply borders to them, remove all of the border except for one side, and finally rotate these pseudoelements so that the border goes where we want it. The following snippet demonstrates:
#keyframes styleBefore {
0% {
border: 0 solid #000;
margin-left: 0;
margin-bottom: 0;
}
20% {
border: 50px solid #000;
border-right: 50px solid #000;
margin-left: -50px;
margin-bottom: -50px;
}
40% {
border: 50px solid #000;
border-right: 50px solid #fff;
}
60% {
border: 50px solid transparent;
border-right: 50px solid #fff;
transform: rotate(0deg);
}
95% {
border: 50px solid transparent;
border-right: 50px solid #fff;
transform: rotate(45deg);
}
100% {
border: 50px solid transparent;
border-right: 50px solid transparent;
margin-left: -50px;
margin-bottom: -50px;
transform: rotate(45deg);
}
}
#keyframes styleAfter {
0% {
border: 0 solid #000;
margin-left: 0;
margin-top: 0;
}
20% {
border: 50px solid #000;
border-right: 50px solid #000;
margin-left: -50px;
margin-top: -50px;
}
40% {
border: 50px solid #000;
border-right: 50px solid #fff;
}
60% {
border: 50px solid transparent;
border-right: 50px solid #fff;
transform: rotate(0deg);
}
95% {
border: 50px solid transparent;
border-right: 50px solid #fff;
transform: rotate(-45deg);
}
100% {
border: 50px solid transparent;
border-right: 50px solid transparent;
margin-left: -50px;
margin-top: -50px;
transform: rotate(-45deg);
}
}
body { font-family: monospace; }
.navbar {
position: absolute;
left: 0; top: 0;
width: 90px; height: 100%;
padding-left: 10px;
background-color: rgba(70, 0, 170);
overflow: hidden;
}
.item {
position: relative; top: -85px;
height: 90px; line-height: 90px;
color: #fff;
text-align: center;
z-index: 1;
cursor: pointer;
font-size: 200%;
}
.item.selected {
background-color: #fff;
border-radius: 100%;
color: #000;
}
.item.selected::before,
.item.selected::after {
content: ' '; display: block;
position: absolute;
left: 0; width: 100%; height: 100%;
pointer-events: none;
border-radius: 100%;
z-index: -1;
}
.item.selected::before { bottom: 100%; animation: 10s infinite linear styleBefore; }
.item.selected::after { top: 100%; animation: 10s infinite linear styleAfter; }
<div class="navbar">
<div class="item">(1)</div>
<div class="item">(2)</div>
<div class="item selected">(3)</div>
<div class="item">(4)</div>
</div>
It's really a matter of pixels; to adjust pixel-wise the border-radius and top & bottom properties. Fiddled it.
.active::before {
content: "";
position: absolute;
background-color: transparent;
border-color: white;
border-width: 0 0.5rem 0.7rem 0;
width: 2rem;
height: 2rem;
right: -0.5rem;
border-radius: 0 0 100% 0;
top: -1.34rem;
outline: white;
}
.active::after {
content: "";
position: absolute;
background-color: #f8f8f800;
border-color: white;
border-width: 0.7rem 0.7rem 0px 0px;
width: 2rem;
height: 2rem;
right: -0.7rem;
border-radius: 0 100% 0 0;
bottom: -1.30rem;
}
.active-link {
display: flex;
float: right;
justify-content: center;
align-items: center;
background-color: white;
border-top-left-radius: 10rem;
border-bottom-left-radius: 10rem;
width: 8rem;
height: 5rem;
margin-left: 10px;
}
.active-link .text-black {
margin-left: -10px;
}
<link href="https://unpkg.com/tailwindcss#^1.0/dist/tailwind.min.css" rel="stylesheet" />
<nav class="w-24 h-64 bg-indigo-900 rounded-xl">
<div class="flex flex-col items-center justify-between h-full py-12">
<div>
Title
</div>
<div class="w-full">
<ul class="flex flex-col items-center space-y-12 w-full">
<li class="w-full flex justify-center relative active">
<nuxt-link :to="menuItem.target" class="active-link">
<i class="text-black">Icon</i>
</nuxt-link>
</li>
</ul>
</div>
<div>
<i>Icon</i>
</div>
</div>
</nav>
I want to give border like this. Please check below code.
body {
background: #20262E;
padding: 20px;
font-family: Helvetica;
}
button {
background: #0084ff;
border: none;
border-radius: 30px;
padding: 8px 14px;
font-size: 15px;
color: #fff;
position: relative;
display: block;
border: 1px solid #fff;
}
button:before {
content: "";
border: 4px solid red;
position: absolute;
left: -9px;
top: -8px;
width: 106%;
height: 125%;
border-radius: 30px;
}
<div id="banner-message">
<button>Hover to change color</button> <br/><br/>
<button>Hover to change color lorem ipsum lorem ipsum</button>
</div>
My problem is when content increases inside button border alignment also getting disturbed. Please give me solution on this.
No need complex calculation. Remove the width and consider right like your did with left. Same thing for height:
body {
background: #20262E;
padding: 20px;
font-family: Helvetica;
}
button {
background: #0084ff;
border: none;
border-radius: 30px;
padding: 8px 14px;
font-size: 15px;
color: #fff;
position: relative;
display: block;
border: 1px solid #fff;
}
button:before {
content: "";
border: 4px solid red;
position: absolute;
left: -8px;
top: -8px;
right: -8px;
bottom: -8px;
border-radius: 30px;
}
<div id="banner-message">
<button>Hover to change color</button> <br/><br/>
<button>Hover to change color lorem ipsum lorem ipsum</button>
</div>
You need to combine dynamic and static values together width: calc(100% + 7px);
$blue: #0084ff;
$blue-darker: darken($blue, 5);
body {
background: #20262E;
padding: 20px;
font-family: Helvetica;
}
button {
background: $blue-darker;
border: none;
border-radius: 30px;
padding: 8px 14px;
font-size: 15px;
color: #fff;
position: relative;
display: block;
&:before {
content: "";
border: 4px solid red;
position: absolute;
left: -7px;
top: -6px;
width: calc(100% + 7px);
height: 111%;
border-radius: 30px;
}
}
Fiddle
Just add some padding to the border and adjust the top and left values to fit your font size.
$blue: #0084ff;
$blue-darker: darken($blue, 5);
body {
background: #20262E;
padding: 20px;
font-family: Helvetica;
}
button {
background: $blue-darker;
border: none;
border-radius: 30px;
padding: 8px 14px;
font-size: 16px;
color: #fff;
position: relative;
display: block;
margin-bottom: 10px;
&::before{
content: "";
border: 4px solid red;
position: absolute;
left: -8px;
top: -8px;
padding: 4px;
width: 100%;
height: 100%;
border-radius: 30px;
}
}
https://jsfiddle.net/d4cugr07/
I have a container which holds an image and a panel the appears when you hover over that image. I am trying to get the box shadow on the panel to appear behind the image, while the rest of the panel overlaps the image.
What I have vs. What I'd like to have
HTML:
<div class="container">
<img class="icon" src="http://placehold.it/350x350" />
<div class="sum-container left">
<img src="http://placehold.it/350x150" />
</div>
</div>
CSS:
.container .sum-container {
position: absolute;
top: 0;
bottom: 0;
border: solid 5px blue;
background-color: white;
width: 250px;
height: 200px;
max-height: 100%;
opacity: 0;
overflow: hidden;
z-index: 5;
pointer-events: none;
transition-property: opacity;
transition-duration: .250s;
}
.container .sum-container.left {
right: 100%;
margin-right: -5px;
border-right: none;
padding-right: 0px;
box-shadow: 5px 5px 0px #888888;
}
.container .icon:hover + .sum-container {
z-index: 6;
opacity: 1;
}
.container {
position: absolute;
left: 300px;
top: 20px;
}
.container img {
width: 100%;
}
.icon {
margin-left: auto;
margin-right: auto;
display: block;
width: 100%;
height: auto;
max-width: 480px;
background-color: blue;
box-shadow: 5px 5px 0px #888888;
text-align: center;
font-size: 26px;
color: white;
text-decoration: none;
padding: 5px;
cursor: pointer;
border: none;
outline: none;
user-drag: none;
}
I've included a JSFiddle as well.
Also, still new here. If anyone can suggest a better title, please let me know. I realize you can't actually set multiple z-indexes for one element, but I'm looking for a solution with a similar effect.
If I understand the end goal, you can make the shadow a pseudo element with a negative z-index and remove the z-index from .sum-container and .sum-container will be over .icon and it's pseudo element will be under both of them.
.container .sum-container {
position: absolute;
top: 0;
bottom: 0;
border: solid 5px blue;
background-color: white;
width: 250px;
height: 200px;
max-height: 100%;
opacity: 1;
pointer-events: none;
transition-property: opacity;
transition-duration: .250s;
}
.sum-container:after {
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
content: '';
background: #888;
transform: translate(0,10px);
z-index: -1;
}
.container .sum-container.left {
right: 100%;
margin-right: -5px;
border-right: none;
padding-right: 0px;
}
.container .icon:hover + .sum-container {
opacity: 1;
}
.container {
position: absolute;
left: 300px;
top: 20px;
}
.container img {
width: 100%;
}
.icon {
margin-left: auto;
margin-right: auto;
display: block;
width: 100%;
height: auto;
max-width: 480px;
background-color: blue;
box-shadow: 5px 5px 0px #888888;
text-align: center;
font-size: 26px;
color: white;
text-decoration: none;
padding: 5px;
cursor: pointer;
border: none;
outline: none;
user-drag: none;
}
<div class="container">
<img class="icon" src="http://placehold.it/350x350" />
<div class="sum-container left">
<img src="http://placehold.it/350x150" />
</div>
</div>
I'm trying to get the iframe the to the full page height, but it's not really working.
I already tried many ways to do it, but none of them would work for me...
I hope some of you know how to do it!
HTML:
<body>
<article>
<h1>Hello world</h1>
<p class="subtitle fancy ">
<span>Versie 1.0</span>
</p>
</article>
<iframe class="configurator " src="" frameBorder="0">Browser not compatible.</iframe>
<footer>
<span class="arrow "></span>
<p>© Copyright 2015</p>
</footer>
</body>
CSS:
html, body {
margin: 0;
padding: 0;
}
body {
background: #ECECEC;
margin: 0px;
color: #333;
font-family:'Cinzel Decorative', cursive;
}
h1 {
font-size: 3em;
text-align: center;
}
article {
max-width: 600px;
overflow: hidden;
margin: 0 auto 50px;
}
.subtitle {
margin: 0 0 2em 0;
}
.fancy {
text-align: center;
display: -webkit-flex;
}
.fancy:before, .fancy:after {
content:"";
border-bottom: 1px solid white;
border-top: 1px solid white;
-webkit-flex: 1;
margin: .45em 0;
}
.fancy:before {
margin-right: 15px;
}
.fancy:after {
margin-left: 15px;
}
footer {
background-color: #D7D7D7;
position: relative;
margin-bottom: 0px;
width: 100%;
height: 50px;
position: absolute;
bottom: 0;
left: 0;
font-family:'Montserrat', sans-serif;
border-top: 2px solid white;
}
footer p {
margin-left: 10px;
font-size: 15px;
color: #626262;
}
footer:before, footer:after, footer > .arrow {
content:"";
position: absolute;
bottom: 100%;
left: 50%;
margin-left: -20px;
border: 20px solid transparent;
border-bottom-color: #D7D7D7;
pointer-events: none;
}
footer:after {
margin-left: -8px;
border-width: 8px;
}
footer > .arrow {
margin-left: -11px;
border-width: 11px;
border-bottom-color: #fff;
}
.configurator {
width: 100%;
background-color: white;
position: absolute;
margin-top: -50px;
margin-bottom: -1000px;
}
So what I want is the iframe height all the way to the bottom against the top of the footer.
jsFiddle: http://jsfiddle.net/94d9tbLx/
Added script to find height .
var h = $(document).outerHeight() - $('article').outerHeight() - $('footer').outerHeight();
$('iframe').css('height', h);
Please check the fiddle - http://jsfiddle.net/afelixj/94d9tbLx/2/
Remove all styles from footer and .configurator and add the following:
footer {
background-color: #D7D7D7;
margin-bottom: 0px;
width: 100%;
height: 50px;
left: 0px;
font-family: "Montserrat",sans-serif;
border-top: 2px solid #FFF;
bottom: 0px;
position: relative;
float: left;
}
.configurator {
width: 100%;
background-color: #FFF;
height: 100vh;
float: left;
position: relative;
}
FIXED JSFIDDLE
(adjust the height to anything)