I'm building a component that will be used by others. I need to build a ribbon that needs to be responsive and adapt to the content of the ribbon.
I know how to do it using fixed sized borders, as shown in this example.
But if I change the text inside the ribbon, I get something like
this.
Which css technique can I use to make this component?
IMPORTANT: I can't use JS. Only CSS3 and HTML.
Here is a pure CSS solution, where the width of the ribbon will adapt to the width of the content:
.ribbon {
float:left;
clear: left;
display: inline-block;
position: relative;
height: 40px;
margin:12px 0;
padding: 0 4px;
color: rgb(255,255,255);
font-size: 10px;
font-family: verdana, sans-serif;
font-weight: bold;
background-color: rgb(255,0,0);
box-shadow: -2px 2px 2px rgb(0,0,0);
}
.ribbon::before {
content: '';
display: inline-block;
position: absolute;
top: 12px;
left: -24px;
z-index: -12;
width: 12px;
height: 16px;
border: 12px solid rgb(255,255,255);
border-top-color: rgba(0,0,0,0);
border-right-color: rgb(215,0,0);
}
.ribbon::after {
content: '';
display: inline-block;
position: absolute;
top: 6px;
right: -14px;
z-index: 12;
width: 28px;
height: 28px;
background-color: rgb(255,255,255);
transform: rotate(45deg);
box-shadow: inset 2px -1px 1px -1px rgb(0,0,0);
}
.ribbon span {
display: inline-block;
position: relative;
left: 6px;
width: 66%;
margin-top: 4px;
line-height: 16px;
}
<div class="ribbon">
<span>Ribbon Example</span>
</div>
<div class="ribbon">
<span>Ribbon Example with lots more text</span>
</div>
<div class="ribbon">
<span>Ribbon Example with a very large amount of text to show what happens when the ribbon contains an entire sentence</span>
</div>
Play around with line-height on the text (or add it). Increase the line-height px amount.
It'd be nice to see a jsfiddle of this in action where I can help you.
Related
I need an outline of a button that is curved on the top and bottom, but not the sides. See the Sample Image below to understand what I'm asking for. I will style all the buttons on my website like this one. I've tried a few ways of doing this with border-radius but I haven't been successful yet. Thank you.
Use :before and :after to button
.btn {
border-top:none;
border-bottom:none;
border-right: 2px solid white;
border-left: 2px solid white ;
background-color: #273649;
color: white;
padding: 14px 28px;
font-size: 16px;
cursor: pointer;
}
body{
background-color: #273649;
}
.btn:after {
display: block;
content: "";
position: absolute;
width: 89px;
height: 16px;
border-top: white 2px solid;
top: 48px;
left: 7px;
border-radius: 40%;
}
.btn:before {
display: block;
content: "";
position: absolute;
width: 89px;
height: 16px;
border-top: white 2px solid;
top: 4px;
left: 7px;
border-radius: 40%;
}
<button class="btn">Info</button>
I know this is not the answer that you expected, but I think that the best way to get this result (being the easiest way to get decent results) is with a backgroung-image.
.button {
background-image: url(https://raw.githubusercontent.com/dknacht/GitHub-Test/master/rect4136.png);
background-size: 100% 100%;
}
I just post it in case that someone with similar needs wants to have an alternative.
here an example: https://codepen.io/dknacht/pen/qKbWaY
Dknacht.
I am trying to create image arc like below. I am able to make semicircle but I am not sure how to make the center more thick and outer side thinner of an arc.
Or should I use a image of the arc.
Arc style:
This is very easily done using a pseudo element.
To make it thinner at its end's one set the border width to 0 on all side but the right.
body {
background: black;
}
div {
position: relative;
display: inline-block;
font-size: 30px;
color: lightgreen;
margin: 40px;
}
div::after {
content: '';
position: absolute;
right: -20px;
top: -30px;
height: 100px;
width: 80px;
border-radius: 50%;
border: 0 solid lightgreen;
border-width: 0 5px 0 0;
}
<div>JK</div>
If you're trying to draw your arc with CSS (and you aren't supporting certain legacy browsers), you can achieve the effect by manipulating the border of an element as in this prototype example…
.arc {
height: 100px;
width: 80px;
border: 0 solid #f00;
border-right-width: 5px;
border-radius: 50%;
position: relative;
}
.arc>span {
position: absolute;
top: 50%;
right: 15px;
transform: translateY( -50%);
color: #f00;
text-transform: uppercase;
font-weight: bold;
font-family: 'Arial', sans-serif;
font-size: 30px;
}
<div class="arc"><span>Foo</span></div>
Which has the added advantage of not obscuring the background of the element behind it with a solid color, too.
html{
background:black;
}
#moon {
color:lightgreen;
line-height: 110px;
text-align:center;
font-size:30px;
width: 90px;
height: 120px;
border-radius: 50%;
border-right:6px solid lightgreen;
}
<div id="moon">
JK
</div>
I tried to insert into my site a border-radius. It should look like:
I use Font Awesome and Bootstrap (in Fiddle I can’t insert it). This is how I tried to do that: http://jsfiddle.net/24oehpeh/
This is the code:
.ikonka:hover{
border: 2px solid;
border-radius:100%;
}
<div class="ikonka">f</div>
What did I do wrong?
You need to set a width on your element. As it stands, the content f is wrapped in a div, which is a block level element. This will occupy maximum horizontal space available.
.ikonka {
border: #fff 2px solid;
border-radius: 50%;
height: 20px;
text-align: center;
width: 20px;
}
.ikonka:hover {
border-color: #000;
}
<div class="ikonka">f</div>
I choosed to use the pseudo element "before" for this solution.
It gives you the benefit like "a second element", where you can more freely style it without making to many tricks with the main element.
Updated, has a perfectly round circle now.. :)
.ikonka {
position: relative;
border: 2px solid transparent;
display: inline-block;
/*padding: 4px 10px; removed */
background-color: black;
color: white;
width: 24px; /* added */
height: 24px; /* added */
line-height: 24px; /* added */
text-align: center; /* added */
}
.ikonka:hover:before {
border: 2px solid white;
border-radius:100%;
content: "";
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
}
<div class="ikonka">f</div>
The div must not be set to auto-width (which would be 100%).
The border should be transparent, so there are two pixels of invisible border.
A border radius of 50% suffices since it bends half of each side.
To make it look like your example, some font styling is necessary.
Result:
body{ background-color:#2C2F34; }
.ikonka{
width:32px;
height:32px;
border: 2px solid transparent;
border-radius:50%;
color:white;
cursor:default;
text-align:center;
font-weight:bold;
font-size:26px;
font-family:sans-serif;
}
.ikonka:hover{ border-color:white; }
<div class="ikonka">f</div>
Try this.
.ikonka:hover{
border: 2px solid white;
border-radius:100%;
content: "";
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
}
.ikonka {
width: 100px;
height: 72px;
text-align: center;
background-color: black;
font-size: 51px;
color: white;
vertical-align: middle;
position: relative;
display: inline-block;
padding: 16px 8px;
}
<div class="ikonka">f</div>
Is there any way to create the border on the left with css ?
Here is a way to do it using CSS; you are just layering a Parallelogram and a Rectangle:
.espanolIcon
{
width: 300px;
height: 100px;
padding-left: 30px;
}
.rectangle {
position: absolute;
top: 0px;
left: 200px;
width: 200px;
height: 100px;
background-color: green;
border-radius: 0px 0px 30px 40px;
}
.arrow-left {
position: absolute;
top: 0px;
width: 300px;
height: 100px;
background-color: green;
-webkit-transform: skew(22deg);
transform: skew(22deg);
border-radius: 0px 0px 30px 40px;
}
h1 {
color: white;
}
<div class="espanolIcon">
<div class="rectangle"><h1>Espanol</h1></div>
<div class="arrow-left"></div>
</div>
Use a zero-dimension :before with thick, partial borders
By adjusting the top/bottom and left/right values of border-width on the :before pseudo-element, you can effectively change the skew of the triangle. The left position can then be changed to properly align the pseudo-element.
a {
display: inline-block;
position: relative;
margin-left: 14px; /* Should counter `left` value of `a:before` */
padding: .5em 1em;
color: #fff;
font: bold 1em/1 sans-serif;
text-decoration: none;
text-transform: uppercase;
border-radius: 0 0 10px 10px;
background: #75bf41;
}
a:before {
content: '\200B'; /* zero-width non-breaking space */
display: block;
position: absolute;
top: 0;
left: -14px; /* Adjust to align */
width: 0;
height: 0;
border-width: 14px 8px; /* Adjust top/bottom and left/right to skew */
border-style: solid;
border-color: #75bf41 #75bf41 transparent transparent; /* Triangle orientation. */
}
Español
Full css could work, but you should use .png as background-image or perhaps you could use .svg as you can animate and/or change every point or pixel. You might be able to use just CSSbut it would take a lot of leveling and positioning and alot of layers of absolute and relative positioning. As Css would only change the full width of the element, and it can only be used to change the width of elements. What you can do is use .svg, you could map every pixel which could be animated.
I accomplished it using borders and pseudo elements.
<ul>
<li class="lang-item lang-item-6 lang-item-es">
::before
<a>Español</a>
</li>
</ul>
ul {
position:relative;
}
.lang-item {
text-align: right;
position: relative;
}
.lang-item a {
background: #76c53f;
padding: 15px;
color: #fff;
text-transform: uppercase;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 14px;
}
.lang-item::before {
position: absolute;
right: 101px;
top: -15px;
content: "";
display: inline-block;
border-top: 40px solid #76C541;
border-left: 40px solid transparent;
}
jsfiddle
I been playing with css around a div for sometime now, and still couldn't find a way to copy the picture below.
Anyone can help would be great. And it should be a div or something that I can put a text inside.
A bit tricky, but doable with pure CSS.
HTML:
<span class="hover-me">Mouse goes here</span>
<div class="tooltip">
<div class="tooltip-origin-border">
<div class="tooltip-origin-inner">
</div>
</div>
<div class="tooltip-content">
This is a tooltip.
</div>
</div>
CSS:
.tooltip {
position: absolute;
margin-top: -30px;
margin-left: 120px;
display: none;
}
.tooltip-content {
padding: 10px;
border-radius: 5px;
border: 1px solid #33c;
background: #ddf;
}
.tooltip-origin-border {
border: 10px solid transparent;
border-right-color: #33c;
margin-top: 10px;
margin-left: -19px;
position: absolute;
}
.tooltip-origin-inner {
border: 8px solid transparent;
border-right-color: #ddf;
margin-top: -8px;
margin-left: -6px;
position: absolute;
}
.hover-me {
cursor: pointer;
}
.hover-me:hover + .tooltip {
display: block;
}
You just need to play with the positions. The "arrow" is actually a box, with transparent left, top and bottom borders, leaving only the right one visible and because of the way they connect to each other, there's a triangle shape. Jsfiddle
I think CssArrowPlease is what you're looking for.
Try this ->http://jsfiddle.net/5amvG/
I Hope this is what you are looking for
CSS:
#popup{
overflow: visible;
position: relative;
border: 0;
padding: 40px;
height: 40px;
width: 110px;
color: #fff;
background: #d83c3c;
border-radius: 0 3px 3px 0;
}
#popup:before{
content: '';
position: absolute;
border-width: 8px 8px 8px 0;
border-style: solid solid solid none;
border-color: transparent #d83c3c transparent;
top: 12px;
left: -6px;
}
HTML :
<div id="popup">
Sell yourself and say what makes you,you !
</div>
I guess this can help you:
Pure CSS speech bubbles:
http://nicolasgallagher.com/pure-css-speech-bubbles/demo/