I'm trying to achieve the results on this page http://www.andreapinchi.it/css3-ribbon/
The Side to side one of course but I can't seem to get the '3D' effect.
Please see
http://jsfiddle.net/vuvzcot6/
[html]
<div class="box">
<div class="ribbon both_ribbon">
<h2>Ribbon side to side</h2>
</div>
</div>
[css]
div.both_ribbon{
background: lime;
text-align: center;
color: #000;
padding: 10px 9px 10px 10px;
width: 100%;
margin-left: -10px;
}
div.both_ribbon::before{
display: block;
width: 10px;
height: 0px;
position: absolute;
bottom: -10px;
left: -11px;
content: "";
border-bottom: 10px solid transparent;
border-right: 10px solid rgb(0, 80, 116);
}
div.both_ribbon::after{
display: block;
width: 10px;
height: 0px;
position: absolute;
bottom: -10px;
right: -10px;
content: "";
border-bottom: 10px solid transparent;
border-left: 10px solid rgb(0, 80, 116);
}
.box {
width: 850px;
height: 800px;
background: #82caff;
}
Someone please guide me.
It looks like you're missing the ribbon CSS class, which is necessary for the other classes to work:
.ribbon{
color: #fff;
margin: 30px 0 50px;
position: relative;
text-transform: uppercase;
background: rgb(0, 164, 239);
border: 1px solid rgba(0,0,0,.3);
box-shadow: 0px 1px 3px rgba(0,0,0,.2);
padding: 10px 15px;
clear: both;
}
Related
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 need an arrow on the right side of the div but this one is not working.
Here is the fiddle:
https://jsfiddle.net/azb5m3r2/2/
The arrow correctly appears on the left side of the div, but I want it to appear on the right side (opposite side).
body {
font-family: Helvetica;
font-size: 13px;
}
div.callout {
height: 20px;
width: 130px;
/*float: left;*/
z-index: 1;
}
div.callout {
background-color: #444;
background-image: -moz-linear-gradient(top, #444, #444);
position: relative;
color: #ccc;
padding: 20px;
border-radius: 3px;
box-shadow: 0px 0px 20px #999;
//margin: 25px;
min-height: 20px;
border: 1px solid #333;
text-shadow: 0 0 1px #000;
/*box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset;*/
}
.callout::before {
content: "";
width: 0px;
height: 0px;
border: 0.8em solid transparent;
position: absolute;
}
.callout.top::before {
left: 0%;
bottom: -20px;
border-top: 11px solid #444;
}
.callout.bottom::before {
left: 45%;
top: -20px;
border-bottom: 10px solid #444;
}
.callout.right::before {
left: -20px;
top: 40%;
border-right: 10px solid #444;
}
/* .callout.left::after {
right: -20px;
top: 40%;
border-left: 10px solid #444;
}
*/
.callout.left:after {
right: -20px;
top: 40%;
border-left: 10px solid #444;
}
<div class="callout left">test</div>
This works on the left hand side
<div class="callout right">test</div>
Instead of this:
.callout.left::after {
right: -20px;
top: 40%;
border-left: 10px solid #444;
}
Use this:
.callout.left::before {
right: -20px;
top: 40%;
border-left: 10px solid #444;
}
And, optionally, for a perfectly centered arrow, use this:
.callout.left::before {
right: -20px;
top: 50%;
transform: translateY(-50%);
border-left: 10px solid #444;
}
revised fiddle
For an explanation of the centering technique, see this post: Element will not stay centered, especially when re-sizing screen
The callout.left must be ::before , not ::after or :after, Same as you give the .callout::before style.
The code should like this
.callout.left::before {
right: -20px;
top: 40%;
border-left: 10px solid #444;
}
I think you may try something like this:
.callout {
position: relative;
top: 0;
left: 0;
display: block;
padding: 10px;
}
.callout.right {
margin-left: 10px;
}
.callout.right::before {
position: absolute;
top: 50%;
left: 0;
width: 0;
height: 0;
margin-top: -10px;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-right: 10px solid #a8c3e5;
content: '';
}
.callout.right::after {
position: absolute;
top: 50%;
left: 2px;
width: 0;
height: 0;
margin-top: -10px;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-right: 10px solid #f9f9f9;
content: '';
}
.callout-inner {
padding: 2px;
width: 240px;
overflow: hidden;
background: black;
background: #a8c3e5;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
.callout-content {
padding: 14px;
margin: 0;
background-color: #f9f9f9;
color: #39569A;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
-webkit-background-clip: padding-box;
-moz-background-clip: padding-box;
background-clip: padding-box;
}
<div class="callout right">
<div class="callout-inner">
<div class="callout-content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
</div>
</div>
#right {
background-color: #333;
height: 60px;
position: relative;
width: 150px;
border-radius:5px;
float:right;
font-family:Helvetica;
color:#FFF;
text-align:center;
line-height:55px;
}
#right:after {
content: ' ';
height: 0;
position: absolute;
width: 0;
border: 10px solid transparent;
border-top-color: #333;
top: 100%;
left: 50%;
margin-left: -10px;
}
****
<div id="right">test</div>
https://jsfiddle.net/razia/peeq2aam/
I have this code snippet:
.multiply-button {
display: table;
background: rgba(0, 0, 0, 0);
border: none;
color: white;
padding: 0;
}
.multiply-button-content {
display: table-cell;
background: green;
padding: 10px 9px;
border: solid 1px black;
border-right: none !important;
}
.multiply-button-arrow {
display: table-cell;
width: 0px;
height: 0px;
border-style: solid;
border-width: 20px 0 20px 12px;
border-color: transparent transparent transparent green;
}
<button id="multiply-button" class="multiply-button">
<div class="multiply-button-content">Multiply</div>
<div class="multiply-button-arrow"></div>
</button>
I need to make border on this "arrowed" button. I can easily border rectangle part (I've already did it), but how to make this border on triangle part?
The following should do what you need
.multiply-button {
display: table;
background: rgba(0, 0, 0, 0);
border: none;
color: white;
padding: 0;
}
.multiply-button-content {
display: table-cell;
background: green;
padding: 0 9px;
border: solid 1px black;
border-right: none !important;
position: relative;
vertical-align:middle;
height: 40px; /* double the border width */
box-sizing: border-box;
}
.multiply-button-content:after,
.multiply-button-content:before {
left: 100%;
top: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-width: 20px 0 20px 12px;
margin-top: -20px;
}
.multiply-button-content:after {
border-color: rgba(0, 128, 0, 0);
border-left-color: #008000;
margin-left: -1px;
}
.multiply-button-content:before {
border-color: rgba(0, 0, 0, 0);
border-left-color: #000000;
}
<button id="multiply-button" class="multiply-button">
<div class="multiply-button-content">Multiply</div>
</button>
This is a useful tool
div{
position: relative;
background-color: #008000;
padding: 0px 16px;
height: 40px;
line-height: 40px;
display: inline-block;
color: white;
border: 2px solid black;
border-right: none;
z-index:1;
}
div:before{
content: '';
position: absolute;
left: 100%;
z-index:-1;
width: 28px;
height: 28px;
background-color: #008000;
border-right: 2px solid black;
border-bottom: 2px solid black;
transform: rotate(-45deg) translate(-14px,-7px);
}
<div>Multiply</div>
Or much simplier :
the CSS with only one pseudo element
.multiply-button {
background: rgba(0, 0, 0, 0);
border: none;
width: 100px;
color: #FFF;
padding: 0;
overflow: hidden;
}
.multiply-button-content {
display: block;
position: relative;
background: #008000;
width: 60px;
padding: 10px 9px;
border: solid 1px #000;
border-right: none !important;
}
.multiply-button-content:before {
content: "";
position: absolute;
width: 36px;
height: 31px;
z-index: -1;
top: 0;
right: -13px;
border: 1px solid #000;
background: #008000;
transform: rotate(45deg);
}
<button id="multiply-button" class="multiply-button">
<div class="multiply-button-content">Multiply</div>
</button>
Since it only takes one pseudo element to make the 'point', you could use the other to make a border behind it (making it slightly bigger in size).
For example;
div {
height: 30px;
border: 2px solid black;
display: inline-block;
border-right: 2px solid transparent;
line-height: 30px;
text-align: center;
position: relative;
background: tomato;
color: white;
}
div:before {
content: "";
position: absolute;
border: 17px solid transparent;
border-left: 17px solid black;
right: -35px;
top: -2px;
z-index: 6;
}
div:after {
content: "";
position: absolute;
border: 15px solid transparent;
border-left: 15px solid tomato;
right: -31px;
top: 0;
z-index: 8;
}
<div>Arrow, Please!</div>
You can achieve that with :before or :after pseudo selectors. Study and adjust the example below.
.multiply-button {
display: inline;
background: rgba(0, 0, 0, 0);
border: none;
color: white;
padding: 0;
position: realtive;
}
.multiply-button-content {
display: table-cell;
background: green;
padding: 10px 9px;
border: solid 1px black;
border-right: none !important;
width: 100px;
position: relative;
}
.multiply-button-arrow {
width: 0;
height: 0px;
border-style: solid;
border-width: 20px 0 20px 12px;
border-color: transparent transparent transparent black;
position: absolute;
top: -2px;
right:-12px;
}
.multiply-button-arrow:before {
border-style: solid;
border-width: 20px 0 20px 12px;
border-color: transparent transparent transparent green;
position: absolute;
right: 1px;
top: -20px;
content: "";
}
<button id="multiply-button" class="multiply-button">
<div class="multiply-button-content">
<div class="multiply-button-arrow"></div>
Multiply</div>
</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>
:hover not working after applying :before and :after.
I'm checking on Chrome.
Here's my code :
<style>
* {
margin: 0px;
padding: 0px;
box-shadow: none;
}
body {
background: black;
}
#demoBoard {
position: relative;
margin: 7px auto;
width: 630px;
height: 650px;
background-color: grey;
background-image: radial-gradient(152px at 324px 50%, black, grey 99%);
opacity: 0.9;
border-radius: 10%;
}
#demoBoard h2 {
position: absolute;
color: rgb(243, 100, 20);
text-align: center;
text-shadow: 2px 2px 2px black;
top: 3px;
left: 290px;
-webkit-user-select: none;
}
#Gboard {
position: absolute;
width: 580px;
height: 580px;
background: rgba(0, 0, 0, 0.8);
position: absolute;
border: 5px solid crimson;
box-shadow: 3px 3px 4px black;
top: 34px;
left: 18px;
}
#demoBoard:before {
position: absolute;
content: "";
width: 628px;
height: 648px;
border-left: 1px solid rgb(41, 41, 51);
border-right: 1px solid rgb(41, 41, 51);
border-radius: 10%;
box-shadow: inset 10px 10px 30px black;
left: -1px;
}
#demoBoard:after {
position: absolute;
left: -1px;
top: -2px;
content: "";
width: 631px;
height: 651px;
border-bottom: 1px solid rgb(41, 41, 51);
border-top: 1px solid rgb(41, 41, 51);
border-radius: 10%;
box-shadow: inset -10px -10px 30px black;
}
#Gboard:hover {
cursor: pointer;
}
#Gboard:active {
box-shadow: 1px 1px 2px black;
cursor: pointer;
}
#options {
position: absolute;
top: 200px;
left: 180px;
color: crimson;
font: 20px bold;
background: rgba(123, 123, 123, 0.4);
border-radius: 10%;
width: 250px;
height: 300px;
}
#options:before {
content: "";
position: absolute;
box-shadow: inset 14px 14px 35px black;
border-radius: 10%;
width: 250px;
height: 300px;
}
#options:after {
content: "";
top: 2px;
position: absolute;
box-shadow: inset 0px -14px 35px black;
border-radius: 10%;
width: 250px;
height: 300px;
}
#options p {
position: absolute;
top: 12px;
left: 210px;
color: crimson;
font-size: 30px;
text-shadow: 0px 1px 1px black;
}
#options p:hover {
cursor: pointer;
}
#options ul {
list-style: none;
padding-top: 50px;
padding-left: 50px;
display: block;
}
#options ul li {
padding-bottom: 2px;
text-align: center;
border-bottom: 1px solid black;
width: 150px;
height: 30px;
text-align-last: right;
line-height: 2;
text-shadow: 0px 1px 1px black;
}
#options ul li:before {
position: absolute;
content: "";
left: 50px;
padding-bottom: 2px;
text-align: center;
border-bottom: 1px solid rgba(134, 94, 14, 0.5);
width: 150px;
height: 31px;
}
#options ul li:hover {
cursor: pointer;
padding-bottom: 5px;
font-size: 22px;
}
#options ul li:hover:before {
position: absolute;
content: "";
left: 50px;
padding-bottom: 2px;
text-align: center;
border-bottom: 1px solid green;
width: 150px;
height: 31px;
}
</style>
<div id="demoBoard">
<h2>Demo</h2>
<div id="Gboard"></div>
<div id="options" class="menu">
<p id="close">x</p>
<ul>
<li>Demo</li>
<li>Demo</li>
<li>Demo</li>
<li>Demo</li>
<li>Demo</li>
<li>Test</li>
</ul>
</div>
</div>
:hover is not working on all the elements that is applying hover.
I don't know what's going on with this code. It's working on some other test I've done.
That's because the content created by :after and :before on #demoBoard and #content is placed on top on your links, so you can't hover over them.
Add this to change the z-index of your links, essentially putting them on top of the other pseudo content.
#options ul li {
position: relative;
z-index: 2;
}
Note: if you do this, also change the left value of #options ul li:before and #options ul li:hover:before to "0", since it will now position itself relative to the list-item.
I gave the <ul> the following styles:
position: relative;
z-index: 1;
And it is working fine. A lot of the elements are positioned absolutely but the order of them is not defined.