I'm trying to create speech bubbles like below using Viewport Sized Typography
Everything works. It's not ideal but works... only problem is that the "arrow" wont stay at its place when resizing window it moves either inside or outside of bubble after resize
Here is my code so far:
.speechBubble {
position: relative;
display: inline-block;
text-align: center;
color: #FFFFFF;
text-shadow: 0 0 3vw yellow;
background-color: #000000;
border: 3px solid #FFF;
-webkit-border-radius: 58px;
-moz-border-radius: 58px;
border-radius: 50%;
padding: 0px 100px 0px 100px;
-webkit-box-shadow: 2px 2px 4px #888;
-moz-box-shadow: 2px 2px 4px #888;
box-shadow: 2px 2px 4px #888;
max-width: 30vw;
}
.speechBubble:before {
content: '';
position: absolute;
border-style: solid;
border-width: 3vw 11.3vw 2vw 0;
border-color: transparent #FFFFFF;
display: block;
width: 0;
z-index: 0;
left: 4.5vw;
top: -30px;
display: block;
transform: rotate(53deg);
}
.speechBubble:after {
content: '';
position: absolute;
border-style: solid;
border-width: 3vw 11.3vw 2vw 0;
border-color: transparent #000000;
display: block;
width: 0;
z-index: 1;
left: 5vw;
top: -25px;
transform: rotate(53deg);
display: block;
}
.speechBubbleContent {
position: relative;
width: 80%;
margin: 0 auto;
text-transform: uppercase;
padding: 30px;
line-height: 3.7vw;
font-size: 3.7vw;
max-width: 40vw;
}
<div class="speechBubble">
<div class="speechBubbleContent">Some realy really really long text</div>
</div>
Related
In this photo I added a div arrow using CSS I turned it into an arrow. In the center of the div/arrow i need to put an image.
This icon inside the grid is not changing the position to center without disturbing the css of the arrow created using grid.
.arrow {
position: relative;
text-indent: 30px;
text-align: center;
background-color: #E6EAEF;
display: inline-block;
zoom: 1;
*display: inline;
font-size: 1rem;
text-align: center;
padding: auto 0;
align-items: center;
height: 24px;
margin: 5px;
padding: 5px;
/* tweaked this */
font-size: 1rem;
line-height: 50px;
box-shadow: 0 8px 6px -6px black;
}
.arrow:after {
content: "";
position: absolute;
width: 0;
height: 0;
left: 0;
border-top: 17px solid transparent;
border-left: 12px solid #E6EAEF;
border-bottom: 17px solid transparent;
margin: -5px 10px 0 5px;
}
.arrow:before {
content: "";
position: absolute;
width: 0;
height: 0;
left: 0;
border-top: 17px solid transparent;
border-left: 10px solid white;
border-bottom: 17px solid transparent;
margin: -5px 0 0 0;
}
.arrow-icon {
display: inline-block;
position: relative;
margin-top: 0px;
margin-left: 0px;
padding-left: 0px;
height: 15px !important;
}
<div class="arrow">
<img class="arrow-icon" src="https://www.freeiconspng.com/uploads/magnifying-glass-icon-13.png" alt="">
</div>
`
In case the image has no action purpose, such as click events, and is for display purposes only, you can place it in the background.
.arrow {
position: relative;
text-indent: 30px;
text-align: center;
/* All background properties are combined in here. */
/* The CALC() is just to nudge it to the right so it looks better on the arrow. */
background: #E6EAEF url(https://www.freeiconspng.com/uploads/magnifying-glass-icon-13.png) calc(50% + 4px) 50% no-repeat;
background-size: 17px; /* Sets the icon size. */
display: inline-block;
zoom: 1;
*display: inline;
font-size: 1rem;
text-align: center;
padding: auto 0;
align-items: center;
height: 24px;
margin: 5px;
padding: 5px;
/* tweaked this */
font-size: 1rem;
line-height: 50px;
box-shadow: 0 8px 6px -6px black;
width: 50px;
}
.arrow::after {
content: "";
position: absolute;
width: 0;
height: 0;
right: -20px;
border-top: 17px solid transparent;
border-left: 12px solid #E6EAEF;
border-bottom: 17px solid transparent;
margin: -5px 10px 0 5px;
}
.arrow::before {
content: "";
position: absolute;
width: 0;
height: 0;
left: 0;
border-top: 17px solid transparent;
border-left: 10px solid white;
border-bottom: 17px solid transparent;
margin: -5px 0 0 0;
}
<div class="arrow">
</div>
You can set position: absolute; to .arrow-icon and then center it with top: 50%; left: 50%;. Translate is required to center the center of image.
.arrow {
position: relative;
text-indent: 30px;
text-align: center;
background-color: #E6EAEF;
display: inline-block;
zoom: 1;
*display: inline;
font-size: 1rem;
text-align: center;
padding: auto 0;
align-items: center;
height: 24px;
margin: 5px;
padding: 5px;
/* tweaked this */
font-size: 1rem;
line-height: 50px;
box-shadow: 0 8px 6px -6px black;
}
.arrow:after {
content: "";
position: absolute;
width: 0;
height: 0;
left: 0;
border-top: 17px solid transparent;
border-left: 12px solid #E6EAEF;
border-bottom: 17px solid transparent;
margin: -5px 10px 0 5px;
}
.arrow:before {
content: "";
position: absolute;
width: 0;
height: 0;
left: 0;
border-top: 17px solid transparent;
border-left: 10px solid white;
border-bottom: 17px solid transparent;
margin: -5px 0 0 0;
}
.arrow-icon {
display: inline-block;
position: absolute;
margin-top: 0px;
margin-left: 0px;
padding-left: 0px;
height: 15px !important;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 99; /*The Icon was overlapped by some part of arrow*/
}
<div class="arrow">
<img class="arrow-icon" src="https://cdn2.iconfinder.com/data/icons/ios-7-icons/50/search-512.png" alt="">
</div>
Use display:grid and place-items:center this CSS property will center the search icon.
.arrow{
margin:50px 100px;
background:#e6e9ee;
height:50px;
width:80px;
display:grid;
place-items:center;
position:relative;
padding-left:10px;
}
.arrow::after{
content:'';
position:absolute;
border-width:25px 15px;
border-style:solid;
border-color:#e6e9ee;
border-top-color:transparent;
border-right-color:transparent;
border-bottom-color:transparent;
right:-30px;
}
.arrow::before{
content:'';
position:absolute;
border-width:25px 15px;
border-style:solid;
border-color:#fff;
border-top-color:transparent;
border-right-color:transparent;
border-bottom-color:transparent;
left:0px;
}
<div class="arrow">
<img class="arrow-icon" src="https://cdn2.iconfinder.com/data/icons/ios-7-icons/50/search-512.png" height="20">
</div>
css button with double border
I'm trying to acheive the same border effect on the button above.
The closest I can get is the following, but the bottom right corner of the bottom border is not properly rounded:
>
.login__button {
background: transparent;
border: none;
border-width: 2px 1px 2px 2px;
border-style: solid;
border-color: pink;
border-radius: 4px;
color: pink;
margin-bottom: 100px;
position: relative !important;
text-transform: uppercase;
height: 33px;
width: 102px;
box-shadow:
3.5px 4px 0px black,
1.5px 0px 0px pink,
3.5px 4px 0px black,
2px 6px 0px pink;
}
.login__button::before {
background: pink;
content: '';
position: absolute;
height: 35px;
width: 3.0px;
border-radius: 3px;
top: 3%;
right: -2.8px;
}
>
I feel like this should be possible using just box-shadows but there doesnt appear to be a way to modify the width of the box shadow to get just the black portion inset properly.
So the idea is to make the .login__button:before basically look the same as .login__button, but to change the positioning, and to give it a lower z-index than .login__button.
.login__button {
background-color: black;
border: 2px solid #FF00A0;
border-radius: 4px;
color: #FF00A0;
position: relative;
font-size: 15px;
height: 33px;
width: 102px;
cursor: pointer;
}
.login__button:before {
content: '';
background-color: black;
border: 2px solid #FF00A0;
border-radius: 4px;
position: absolute;
width: 100%;
height: 34px;
top: -2px;
left: -2px;
z-index: -1;
cursor: pointer;
box-shadow: 0 0 20px rgb(255,0,160);
}
.login__button:active {
background-color: gold;
}
.login__button:active:before {
background-color: gold;
}
<button class="login__button">LOG IN</button>
And just for the sake of it, I've added a style for then the button is pressed.
.login__button:active {
background-color: gold;
}
.login__button:active:before {
background-color: gold;
}
Here's my attempt.
.login__button {
background: black;
border: 4px solid #FF69B4;
color: #FF69B4;
position: relative;
text-transform: uppercase;
padding: 1em;
display: inline-block;
border-radius: 3px;
}
.login__button::before {
content: '';
background: black;
border: 4px solid #FF69B4;
margin-left: -4px;
position: absolute;
border-radius: 3px;
width: 100%;
height: 100%;
top: 12px;
left: 0;
z-index: -1;
}
Link
I don't know if this is what you're looking for, but here's what I'd probably do.
#a, #b{
border: 2px solid magenta;
border-radius: 4px;
}
#a{
border-top: none;
width: 20%;
box-shadow: 0 0 8px magenta;
background: linear-gradient(to bottom, magenta 0%, black 24%);
}
#b{
color: magenta;
background-color: black;
padding: 4px;
margin-bottom: 4px;
text-align: center;
}
<div id='a'>
<div id='b'>
Button
</div>
</div>
* {
box-sizing: content-box;
}
body { padding: 50px; }
.login__button {
border: 2px solid fuchsia;
border-radius: 4px;
color: fuchsia;
background: black;
text-transform: uppercase;
height: 33px;
width: 102px;
position: relative;
box-shadow: 0 8px 20px 8px rgba(227,37,243,0.3);
}
.login__button::before {
background: black;
border: 2px solid fuchsia;
content: '';
position: absolute;
border-radius: 4px;
width: 100%;
height: 5px;
bottom: -7px;
left: -2px;
}
<button class="login__button">LOG IN</button>
I've see a lot of threads remotely related that basically suggest CSS triangles in the ::after or ::before pseudos, but none have really panned out. I'm throwing this out to see if anyone has any ideas.
I'm looking to create a div with a pointed or pitched top that still maintains a uniform border and box-shadow with the rest of the div.
See link for an image of what I'm trying to create:
If you dont want to use a image you could do something like this. But working with an image is lot easier in this case.
body {
background-color: #CCC;
}
.wrapper {
}
.outer {
width: 0;
height: 0;
border-style: solid;
border-width: 0 205px 32px 205px;
border-color: transparent transparent #ffffff transparent;
position: absolute;
}
.inner {
width: 0;
height: 0;
border-style: solid;
border-width: 0 200px 32px 200px;
border-color: transparent transparent #ea2225 transparent;
margin-left: -200px;
margin-top: 5px;
position: absolute;
}
.fix {
background-color: #FFF;
height: 10px;
width: 410px;
position: absolute;
margin-top: 32px;
}
.red {
width: 396px;
height: 300px;
background-color: #ea2225;
margin-top: 37px;
position: absolute;
border-left: 7px solid #FFF;
border-right: 7px solid #FFF;
border-bottom: 6px solid #FFF;
-webkit-box-shadow: 3px 5px 5px 0px rgba(48,48,48,1);
-moz-box-shadow: 3px 5px 5px 0px rgba(48,48,48,1);
box-shadow: 3px 5px 5px 0px rgba(48,48,48,1);
}
<div class="wrapper">
<div class="fix"></div>
<div class="outer">
<div class="inner">
</div>
</div>
</div>
<div class="red"></div>
See http://jsfiddle.net/0csqog8s/
this should get you started:
Update
This is an updated fiddle which is much better presented.
.first {
display: inline-block;
width: 3em;
height: 3em
}
.second {
position: relative;
display: inline-block;
width: 3em;
height: 3em
}
.third {
position: absolute;
display: inline-block;
width: 0;
height: 0;
line-height: 0;
border: 1.5em solid transparent;
margin-top: -1em;
border-bottom: 1em solid #007BFF;
left: 0em;
top: 0em
}
.forth {
position: absolute;
display: inline-block;
width: 0;
height: 0;
line-height: 0;
border: 1.5em solid #007BFF;
border-bottom: 1.5em solid #007BFF;
left: 0em;
top: 1.5em
}
<span class="first"><span class="second"><i class="third"></i><i class="forth"></i></span></span>
I am trying to achieve the below using pure CSS, is it possible? If I can figure out a way to hide the bottom part to the top of the bottom rounded corner that would work. But I am lost at what would work...
.ribbon, .ribbon * {
box-sizing: border-box;
-moz-box-sizing: border-box;
}
.ribbon {
width: 600px;
margin: 40px auto 10px;
padding: 0 10px 4px;
position: relative;
color: black;
background: #eee;
}
.ribbon h3 {
display: block;
height: 40px;
width: 620px;
margin: 0;
padding: 5px 10px 5px 30px;
position: relative;
left: -30px;
color: white;
background: rgb(193,0,0);
box-shadow: 0 1px 2px rgba(0,0,0,0.3);
}
.ribbon h3::before {
content: '';
display: block;
width: 0;
height: 0;
position: absolute;
bottom: -11px;
z-index: 10;
left: 0;
}
.ribbon.round h3 {
border-radius: 10px 0px 0px 0px;
}
.ribbon.round h3::before {
width: 20px;
height: 30px;
bottom: -20px;
border: none;
background: rgb(61,0,0);
border-radius: 10px 0px 0px 10px;
}
Fiddle to what I have currently
http://jsfiddle.net/yoderman94/Gdgwq/
Simply make your z-index value negative:
.ribbon h3::before {
z-index: -1;
}
That will place it under the heading.
To keep the rounded top, add another block with lower z-index, and fill it with the same background as the heading:
Example: http://jsfiddle.net/K7e96/
Here's a new fiddle, its like 99% there (only tested in Chrome), need to play with the shadows a bit more. http://jsfiddle.net/jrTAA/2/
.ribbon.round h3 {
border-radius: 5px 0px 0px 0px;
}
.ribbon.round h3::before, .ribbon.round h3::after {
width: 20px;
height: 8px;
bottom: -8px;
border: none;
border-top:2px solid rgb(193,0,0);
border-left:1px solid rgb(193,0,0);
border-bottom:1px solid rgb(193,0,0);
background: rgb(61,0,0);
border-radius: 5px 0px 0px 5px;
box-shadow: 0 1px 2px rgba(0,0,0,0.3), inset 2px 1px 2px rgba(0,0,0,0.3);
}
The fiddle:
http://jsfiddle.net/aleation/gCrhQ/
The code:
.ribbon, .ribbon * {
box-sizing: border-box;
-moz-box-sizing: border-box;
}
.ribbon {
width: 600px;
margin: 40px auto 10px;
padding: 0;
position: relative;
color: black;
background: #eee;
}
.ribbon h3 {
display: block;
height: 40px;
width: 100%;
margin: 0;
padding: 9px 0 0 10px;
color: white;
background: rgb(193,0,0);
box-shadow: 0 1px 2px rgba(0,0,0,0.3);
}
.ribbon h3::before,
.ribbon p::before{
content: '';
display: block;
width: 0;
height: 0;
position: absolute;
bottom: -11px;
z-index: 10;
left: 0;
width: 14px;
}
/* Round */
.ribbon.round h3::before{
height: 45px;
top: 0px;
left: -14px;
border: none;
background: rgb(193,0,0);
border-top-left-radius: 7px 4px;
}
.ribbon.round p::before{
height: 7px;
top: 40px;
left: -14px;
border: none;
background: rgb(61,0,0);
border-top-left-radius: 7px 4px;
border-bottom-left-radius: 7px 4px;
}
.ribbon p{
margin: 0;
padding: 20px;
}
I want to create a ribbon effect like on this image (the red part of image):
When I try to create an arrow effect with borders, the shape of object is completely destroyed:
HTML code:
Kategorija
CSS code so far (without trying to create the arrow):
.mali_oglas_kategorija {
position: relative;
display: inline-block;
font-weight: bold;
width: 100px;
padding: 6px 20px 6px 40px;
margin: 10px 10px 10px -18px;
color: #e5e5e5 !important;
background-color: #760000;
-webkit-box-shadow: 0px 2px 4px rgba(0,0,0,.5);
-moz-box-shadow: 0px 2px 4px rgba(0,0,0,.5);
box-shadow: 0px 2px 4px rgba(0,0,0,.5);}
.mali_oglas_kategorija:after{
content: ' ';
position: absolute;
width: 0;
height: 0;
left: 0px;
top: 100%;
border-width: 5px 10px;
border-style: solid;
border-color: #470000 #470000 transparent transparent;
}
Any idea how can I create this?
Made a fiddle here. Couldn't solve it without a b tag though. I used b because it is so small
HTML
Kategorija<b></b>
CSS
.mali_oglas_kategorija {
position: relative;
display: inline-block;
font-weight: bold;
width: 100px;
padding: 6px 20px 6px 40px;
margin: 10px 10px 10px -18px;
color: #e5e5e5 !important;
background-color: #760000;
-webkit-box-shadow: 3px 2px 4px rgba(0,0,0,.5);
-moz-box-shadow: 3px 2px 4px rgba(0,0,0,.5);
box-shadow: 3px 2px 4px rgba(0,0,0,.5);}
.mali_oglas_kategorija:before{
content: ' ';
position: absolute;
width: 0;
height: 0;
left: 0px;
top: 100%;
border-width: 5px 10px;
border-style: solid;
border-color: #470000 #470000 transparent transparent;
}
.mali_oglas_kategorija:after{
content: ' ';
position: absolute;
width: 0;
height: 0;
right: -10px;
top: 0;
border-width: 10px 5px;
border-style: solid;
border-color: #760000 transparent transparent #760000 ;
}
.mali_oglas_kategorija b {
position: absolute;
width: 0;
height: 0;
right: -10px;
bottom: 0;
border-width: 10px 5px;
border-style: solid;
border-color: transparent transparent #760000 #760000 ;
}
body { padding: 50px;}
you could also use a skewed element if this was required for hit-testing as well.
Something like:
.rib {
margin-left: 20px;
height: 40px;
width: 200px;
position: relative;
background: gray;
color: white;
line-height: 40px;
text-align: center;
}
.rib:before,
.rib:after {
content: "";
position: absolute;
right: -10px;
top: 0;
height: 50%;
width: 40px;
background: inherit;
}
.rib:before {
transform: skewX(-45deg);
}
.rib:after {
transform: skewX(45deg);
top: 50%;
}
.shad {
position: absolute;
height: 40px;
width: 20px;
top: 0%;
left: 0;
background: dimgray;
transform-origin: top left;
transform: skewY(45deg);
z-index: -1;
box-shadow:inset 0 0 10px black;
}
<div class="rib">123
<div class="shad">
</div>
</div>