I have a dropdown menu with fixed height and when I want to scroll down, the text is hidden below the top caret.
What can I do to make the text visible in the caret also?
I'm not using any image for the caret.Everything is done using CSS.
This is my code:
<div class="arrow_box">
<div class="content">
.... text ....
</div>
</div>
.arrow_box {
position: relative;
background: #88b7d5;
border: 4px solid #c2e1f5;
width: 300px;
margin: 0 auto;
top:20%;
text-align: center;
}
.arrow_box:after, .arrow_box:before {
bottom: 100%;
left: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
.arrow_box:after {
border-color: rgba(136, 183, 213, 0);
border-bottom-color: #88b7d5;
border-width: 30px;
margin-left: -30px;
}
.arrow_box:before {
border-color: rgba(194, 225, 245, 0);
border-bottom-color: #c2e1f5;
border-width: 36px;
margin-left: -36px;
}
.content{
height: 200px;
width: 100%;
overflow-y:auto;
text-align: center;
}
Related
I want to use this code from CSS Ribbon Generator but only need it for certain featured images - not all.
I have CSS and HTML. It's not clear as to what file I would include the HTML in my child theme to get the CSS to work.
I only want the ribbon for certain featured images. All the plugins I've seen are outdated.
.box {
width: 200px; height: 300px;
position: relative;
border: 1px solid #BBB;
background: #EEE;
}
.ribbon {
position: absolute;
right: -5px; top: -5px;
z-index: 1;
overflow: hidden;
width: 75px; height: 75px;
text-align: right;
}
.ribbon span {
font-size: 10px;
font-weight: bold;
color: #FFF;
text-transform: uppercase;
text-align: center;
line-height: 20px;
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
width: 100px;
display: block;
background: #79A70A;
background: linear-gradient(#F70505 0%, #8F0808 100%);
box-shadow: 0 3px 10px -5px rgba(0, 0, 0, 1);
position: absolute;
top: 19px; right: -21px;
}
.ribbon span::before {
content: "";
position: absolute; left: 0px; top: 100%;
z-index: -1;
border-left: 3px solid #8F0808;
border-right: 3px solid transparent;
border-bottom: 3px solid transparent;
border-top: 3px solid #8F0808;
}
.ribbon span::after {
content: "";
position: absolute; right: 0px; top: 100%;
z-index: -1;
border-left: 3px solid transparent;
border-right: 3px solid #8F0808;
border-bottom: 3px solid transparent;
border-top: 3px solid #8F0808;
}
<div class="box">
<div class="ribbon"><span>PREMIUM</span></div>
</div>
How can add this code for use with specific featured images and which file would I place the HTML code in for the CSS to work?
You can set ribbon on only specific images by separating them from other images, and then using JS to add ribbon to only images that fulfill certain criteria.
Here I am using featured class to separate images from other images, and then using javascript to add ribbon class to those images.
let feat = document.querySelectorAll('.featured')
feat.forEach((img)=>{
img.classList.add('ribbon')
})
.box {
width: 200px; height: 300px;
position: relative;
border: 1px solid #BBB;
background: #EEE;
}
.ribbon {
position: absolute;
right: -5px; top: -5px;
z-index: 1;
overflow: hidden;
width: 75px; height: 75px;
text-align: right;
}
.ribbon span {
font-size: 10px;
font-weight: bold;
color: #FFF;
text-transform: uppercase;
text-align: center;
line-height: 20px;
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
width: 100px;
display: block;
background: #79A70A;
background: linear-gradient(#F70505 0%, #8F0808 100%);
box-shadow: 0 3px 10px -5px rgba(0, 0, 0, 1);
position: absolute;
top: 19px; right: -21px;
}
.ribbon span::before {
content: "";
position: absolute; left: 0px; top: 100%;
z-index: -1;
border-left: 3px solid #8F0808;
border-right: 3px solid transparent;
border-bottom: 3px solid transparent;
border-top: 3px solid #8F0808;
}
.ribbon span::after {
content: "";
position: absolute; right: 0px; top: 100%;
z-index: -1;
border-left: 3px solid transparent;
border-right: 3px solid #8F0808;
border-bottom: 3px solid transparent;
border-top: 3px solid #8F0808;
}
<div style="display:flex; justify-content: space-between; flex-wrap: wrap;">
<div class="box">
<div class="featured"><span>PREMIUM</span></div>
</div>
<div class="box">
<div class="featured"><span>PREMIUM</span></div>
</div>
<div class="box">
<div class=""><span>PREMIUM</span></div>
</div>
<div class="box">
<div class="featured"><span>PREMIUM</span></div>
</div>
<div class="box">
<div class=""><span>PREMIUM</span></div>
</div>
<div class="box">
<div class="featured"><span>PREMIUM</span></div>
</div>
</div>
I am trying to draw a tip in CSS.
I have "middle success" so far, the only problem is that, depending on DIV width, the tip sometimes are not in the center position.
What I want:
My code so far:
.logo {
color: #000;
font-size: 1.4em;
text-align: center;
padding-top: 1.5em;
text-transform: uppercase;
position: relative;
}
.line {
height: 1px;
overflow: hidden;
background: #000;
}
.line.top,
.line.bottom {
width: 90%;
}
.line.top {
margin: 0 auto 4px;
}
.line.bottom {
margin: 4px auto 0;
}
.angle {
position: absolute;
top: 19px;
left: 46%; // I think my problem is here!
}
.angle .line.left,
.angle .line.right {
width: 20px;
}
.angle .line.left {
-ms-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
margin: 7px;
}
.angle .line.right {
-ms-transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
margin: -7px;
}
<div class="logo">
<div class="angle">
<div class="line left"></div>
<div class="line right"></div>
</div>
<div class="line top"></div>
MY TEXT
<div class="line bottom"></div>
</div>
How can I solve this?
I thought setting .angle width: 30px and margin: 0 auto, but it have position: absolute, so it is not possible.
Ps: LESS can be used.
No need of so many elements. Just use .logo element and its pseudo classes. and use letter-spacing css property to give space between the letters. (or use the exact font, if you know the name)
CSS
.logo {
color: #000;
font-size: 1.4em;
text-align: center;
height: 2em;
margin-top: 2em;
letter-spacing: 1em;
text-transform: uppercase;
line-height: 2em;
position: relative;
border-top: 1px solid #000;
border-bottom: 1px solid #000;
}
.logo::after, .logo::before {
content:"";
border-width: 20px;
border-style: solid;
position: absolute;
left: 50%;
bottom: 100%;
transform: translateX(-50%);
}
.logo::after {
border-width: 18px;
margin-bottom: 1px;
border-color: transparent transparent white transparent;
}
.logo::before {
border-color: transparent transparent black transparent;
}
Working Fiddle - using CSS
Working Fiddle - using SCSS
Nested Triangles!
.outer {
border: 40px solid transparent;
border-bottom: 40px solid black;
width: 0;
height: 0;
position: relative;
margin: 0 auto;
}
.inner {
border: 36px solid transparent;
border-bottom: 36px solid white;
width: 0;
height: 0;
position: absolute;
top: -32px;
left: -36px;
}
<div class="outer">
<div class="inner"></div>
</div>
You could just rotate a div and add a border to it. Then using z-indexing put it behind a div with just a top and bottom border holding your text. Might look something like this:
<!DOCTYPE html>
<html>
<head>
<style>
html{padding: 10px;}
.triangle {
width: 10%;
height: 10%;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
z-index: -1;
border-top: 1px solid black;
border-left: 1px solid black;
position: absolute;
top: 20px;
left: 45%;
}
.textBox {
height: 40px;
border-top: 1px solid black;
border-bottom: 1px solid black;
background: white;
z-index: 2;
text-align: center;
}
</style>
</head>
<body>
<div class="logo">
<div class="triangle"></div>
<div class="textBox">
MY TEXT
</div>
</div>
</body>
</html>
body{
margin-top:70px;
}
h2{
color:#fff;
text-align:center;
}
.arrow_box {
position: relative;
background: #88b7d5;
border: 4px solid #c2e1f5;
}
.arrow_box:after, .arrow_box:before {
bottom: 100%;
left: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
.arrow_box:after {
border-color: rgba(136, 183, 213, 0);
border-bottom-color: #88b7d5;
border-width: 30px;
margin-left: -30px;
}
.arrow_box:before {
border-color: rgba(194, 225, 245, 0);
border-bottom-color: #c2e1f5;
border-width: 36px;
margin-left: -36px;
}
See working demo here.
I want to make a navigation bar that has an arrow pointing down on hover.
Similar to this:
Is there any way to do this in CSS without using the arrow as a background image and putting padding on the element?
You can use the :after pseudo-element to create a CSS triangle and the position it absolutely.
Something like this:
li.active a:after {
content: '';
display: block;
width: 0;
height: 0;
border-top: 6px solid #333;
border-right: 6px solid transparent;
border-left: 6px solid transparent;
position: absolute;
z-index: 1;
top: 100%;
left: 50%;
margin-left: -3px
}
Demo
Use a <div class="arrow_box">INFORMACION</div>
With the CSS:
.arrow_box {
position: relative;
background: #88b7d5;
border: 1px solid #c2e1f5;
}
.arrow_box:after, .arrow_box:before {
top: 100%;
left: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
.arrow_box:after {
border-color: rgba(136, 183, 213, 0);
border-top-color: #88b7d5;
border-width: 15px;
margin-left: -15px;
}
.arrow_box:before {
border-color: rgba(194, 225, 245, 0);
border-top-color: #c2e1f5;
border-width: 21px;
margin-left: -21px;
}
Generated with http://cssarrowplease.com/
(a simple search on google and you would have found that..)
Using CssArrowPlease as posted before me:
<div class="header">
<div class="nav">
<ul>
<li>Page</li>
<li id="checked">
Page 1
<div class="arrow_box"></div>
</li>
<li>Page</li>
<li>Page</li>
</ul>
</div>
<div class="sub_nav"></div>
</div>
css:
.header{
width: 50%;
background-color: #fbfbfb;
}
.nav ul{
margin: 0px;
padding: 0px;
list-style-type: none;
}
#checked{
padding: 10px;
background-color: #3178ed;
display: inline-block;
color: #fff;
position: relative;
}
.nav li{
padding: 10px;
display: inline-block;
}
.sub_nav{
width: 100%;
height: 20px;
background-color: #dddddd;
}
.arrow_box {
position: absolute;
right: 0;
left: 0;
bottom: 0;
background: #3178ed;
}
.arrow_box:after, .arrow_box:before {
top: 100%;
left: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
.arrow_box:after {
border-color: rgba(49, 120, 237, 0);
border-top-color: #3178ed;
border-width: 10px;
margin-left: -10px;
}
.arrow_box:before {
border-color: rgba(0, 0, 0, 0);
border-top-color: ;
border-width: 11px;
margin-left: -11px;
}
Fiddle: Link
I am trying to make a popover with an error, but I am having trouble making the arrow appear above the border of the div I am attaching it to. I would appreciate any help.
This is what I have so far...
This is the CSS code I am using, but cant get it to work:
1.DIV for the entire popover:
<div class="info-popover">
<div class="inner"></div>
<div class="arrow"></div>
</div>
2.CSS for each:
.info-popover {
height: 250px;
margin-top: -255px;
position: absolute;
width: 400px;
}
.info-popover .inner {
background-color: #FFFFFF;
border: 1px solid #003366;
border-radius: 10px 10px 10px 10px;
height: 240px;
margin-top: 0;
width: 100%;
}
.info-popover .arrow {
background: url("/images/dock/popover-arrow.png") no-repeat scroll center -5px transparent;
height: 15px;
position: relative;
width: 100%;
z-index: 999;
}
CSS solution:
http://jsfiddle.net/wn7JN/
.bubble
{
position: relative;
width: 400px;
height: 250px;
padding: 0px;
background: #FFFFFF;
border: #000 solid 1px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
.bubble:after
{
content: "";
position: absolute;
bottom: -25px;
left: 175px;
border-style: solid;
border-width: 25px 25px 0;
border-color: #FFFFFF transparent;
display: block;
width: 0;
z-index: 1;
}
.bubble:before
{
content: "";
position: absolute;
top: 250px;
left: 174px;
border-style: solid;
border-width: 26px 26px 0;
border-color: #000 transparent;
display: block;
width: 0;
z-index: 0;
}
Easiest way:
HTML:
<div class="meow">
</div>
CSS:
.meow {
height: 100px;
width: 300px;
margin: 30px;
background: linear-gradient(#333, #222);
-o-border-radius: 4px;
-ms-border-radius: 4px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
}
.meow:after {
content: " ";
border-top: 11px solid #222;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
position: relative;
top: 111px;
right: -140px;
}
Live preview: CodePen.io
Just do some few edits.
Try this:
HTML
<div class="info-popover">
<div class="inner"></div>
<p class="arrow"></p>
</div>
CSS
.info-popover {
position: relative;
/* any other CSS */
}
.arrow {
background: url("/images/dock/popover-arrow.png") no-repeat 0 0;
height: 15px;
width: 20px; /* width of arrow image? */
display: block;
position: absolute;
bottom: -15px;
left: 0; margin: 0 auto; right: 0; /* to center the arrow */
}
I've used this on my website, but I'm baffled how it generates the arrow using CSS.
There doesn't appear to be anything that screams "shape generation" to me within the CSS.
The default CSS shown on their website is:
.arrow_box {
position: relative;
background: #88b7d5;
border: 4px solid #c2e1f5;
}
.arrow_box:after, .arrow_box:before {
bottom: 100%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
.arrow_box:after {
border-color: rgba(136, 183, 213, 0);
border-bottom-color: #88b7d5;
border-width: 30px;
left: 50%;
margin-left: -30px;
}
.arrow_box:before {
border-color: rgba(194, 225, 245, 0);
border-bottom-color: #c2e1f5;
border-width: 36px;
left: 50%;
margin-left: -36px;
}
How does it create an arrow?
Thanks
It uses "before" and "after" CSS pseudo-elements
http://www.w3schools.com/css/css_pseudo_elements.asp