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.
Related
I have code that provides me that
CSS Code:
.about-best-big-vector-right {
width: 1380px;
float: right;
border-top: 140px solid #272838;
border-left: 75px solid transparent;
position: relative;
outline: 3px solid #eda225;
outline-offset: .3rem;
-moz-outline-radius-bottomleft: 2em;
}
HTML Code: <div class="about-best-big-vector-right"></div>
But I want to achive that and can't make cornered bottom-left?
Don't use border for this, use skew transformation:
.box {
overflow: hidden;
width: 40%;
margin-left: auto;
}
.box::before {
content: "";
display: block;
margin-right: -10px;
height: 150px;
background: #000 content-box;
padding: 5px;
border: 4px solid orange;
transform-origin: top;
transform: skewX(30deg);
}
<div class="box">
</div>
Hello I'm trying to make a bubble widget but I'm having problems basically I need one on top of the other like this:
but I'm not able to do anything like that
can anybody help me?
code:
export default function App() {
return (
<div className="App">
<h1>Hello CodeSandbox</h1>
<h2>Start editing to see some magic happen!</h2>
<div className="WrapperChat">
<div class="bubble" />
<div class="bubble2 b2" />
</div>
</div>
);
}
css:
.App {
font-family: sans-serif;
text-align: center;
}
body {
margin: 0;
padding: 0;
}
.WrapperChat {
position: fixed;
bottom: 0;
right: 0;
width: 200px;
height: 200px;
background: blue;
}
.bubble {
background-color: #000;
border-radius: 50px;
box-shadow: 0px 0px 6px #fff;
height: 60px;
margin: 20px;
width: 60px;
}
.bubble::after {
background-color: #f2f2f2;
box-shadow: -2px 2px 2px 0 rgba(178, 178, 178, 0.4);
content: "\00a0";
display: block;
height: 10px;
left: -10px;
position: relative;
bottom: -50px;
transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
width: 20px;
}
.bubble2 {
background-color: #000;
border-radius: 50px;
box-shadow: 0px 0px 6px #fff;
height: 80px;
margin: 20px;
width: 80px;
}
.bubble2::after {
background-color: #f2f2f2;
box-shadow: -2px 2px 2px 0 rgba(178, 178, 178, 0.4);
content: "\00a0";
display: block;
height: 10px;
right: -60px;
position: relative;
top: 70px;
transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
width: 20px;
}
.b2 {
transform: translateY(-40%);
}
Basically I am not able to position correctly using the translate and I cannot imagine how to make this cut of the arrow of the ballon
example:
https://codesandbox.io/s/sharp-haslett-tr09n
You can set position: absolute in each bubble element to handle with z-index
.bubble {
background-color: #000;
border-radius: 50px;
box-shadow: 0px 0px 6px #fff;
height: 60px;
margin: 20px;
width: 60px;
**position: absolute;
z-index: 1;**
}
and after add position: absolute here you can set the top
.bubble2 {
background-color: #000;
border-radius: 50px;
box-shadow: 0px 0px 6px #fff;
height: 80px;
margin: 20px;
width: 80px;
top: 60px;
position: absolute;
}
https://codesandbox.io/s/peaceful-snow-e6j8e
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 planning to create a online furniture e-commerce website.
I currently having some product customization page option such as color, types of woods and the height and width as well as some add-on such as mirror and some logo.
Is it possible I code the way which when the user select certain customization option such as the color, and the images showed in the product customization page will update accordingly.
For example, the images showed in the page is a cupboard which is brown color, but when the user choose blue color, the cupboard color will be updated into blue cupboard. Then, if user want to add another mirror into cupboard, then the images will be updated become blue cupboard with mirror.
Any article or tutorial related to these fields can i refer to?
Roxas, I've created you a code snippet you can click on the run snippet button below to see the code performing what you are trying to achieve
$(document).ready(function(){
$(".red-circle").click(function(){
$(".color").addClass("red");
$(".color").removeClass("blue");
$(".color").removeClass("green");
});
$(".blue-circle").click(function(){
$(".color").addClass("blue");
$(".color").removeClass("red");
$(".color").removeClass("green");
});
$(".green-circle").click(function(){
$(".color").addClass("green");
$(".color").removeClass("red");
$(".color").removeClass("blue");
});
$(".circle-pick").click(function(){
$(".color").addClass("circle");
$(".color").removeClass("star");
$(".color").removeClass("square");
});
$(".square-pick").click(function(){
$(".color").addClass("square");
$(".color").removeClass("star");
$(".color").removeClass("circle");
});
$(".star-pick").click(function(){
$(".color").addClass("star");
$(".color").removeClass("square");
$(".color").removeClass("circle");
});
});
.red-circle
{
background: red;
border-radius: 100px;
height: 20px;
width: 20px;
float: left;
margin-right: 5px;
}
.blue-circle
{
background: blue;
border-radius: 100px;
height: 20px;
width: 20px;
float: left;
margin-right: 5px;
}
.green-circle
{
background: green;
border-radius: 100px;
height: 20px;
width: 20px;
float: left;
margin-right: 5px;
}
.color
{
background: black;
}
.red
{
background: red;
}
.blue
{
background: blue;
}
.green
{
background: green;
}
.color
{
width: 100px;
height: 100px;
border-radius: 0;
display: block;
margin: 0 auto;
}
h2
{
text-align: center;
}
.square-pick, .circle-pick
{
background:black;
height: 20px;
width: 20px;
margin-right: 5px;
float: left;
}
.square, .square-pick
{
border-radius: 0;
}
.circle, .circle-pick
{
border-radius: 100px;
}
.color.star, .color.star:after, .color.star:before
{
border-bottom-color: black;
background: transparent;
}
.red.star, .red.star:after, .red.star:before
{
border-bottom-color: red;
background: transparent;
}
.blue.star, .blue.star:after, .blue.star:before
{
border-bottom-color: blue;
background: transparent;
}
.green.star, .green.star:after, .green.star:before
{
border-bottom-color: green;
background: transparent;
}
.star {
// margin: 50px 0;
position: relative;
text-align: center;
display: block;
color: black;
width: 0px;
height: 0px;
border-right: 50px solid transparent;
border-bottom: 35px solid;
border-left: 50px solid transparent;
-moz-transform: rotate(35deg);
-webkit-transform: rotate(35deg);
-ms-transform: rotate(35deg);
-o-transform: rotate(35deg);
}
.star:before {
border-bottom: 40px solid;
border-left: 15px solid transparent;
border-right: 15px solid transparent;
position: absolute;
height: 0;
width: 0;
top: -23px;
left: -33px;
display: block;
content: '';
-webkit-transform: rotate(-35deg);
-moz-transform: rotate(-35deg);
-ms-transform: rotate(-35deg);
-o-transform: rotate(-35deg);
}
.star:after {
position: absolute;
display: block;
color: red;
top: 3px;
left: -53px;
width: 0px;
height: 0px;
border-right: 50px solid transparent;
border-bottom: 35px solid;
border-left: 50px solid transparent;
-webkit-transform: rotate(-70deg);
-moz-transform: rotate(-70deg);
-ms-transform: rotate(-70deg);
-o-transform: rotate(-70deg);
content: '';
}
.star-pick {
float: left;
margin: 10px 0;
position: relative;
display: block;
color: red;
width: 0px;
height: 0px;
border-right: 20px solid transparent;
border-bottom: 14px solid black;
border-left: 20px solid transparent;
-moz-transform: rotate(35deg);
-webkit-transform: rotate(35deg);
-ms-transform: rotate(35deg);
-o-transform: rotate(35deg);
}
.star-pick:before {
border-bottom: 16px solid black;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
position: absolute;
height: 0;
width: 0;
top: -9px;
left: -13px;
display: block;
content: '';
-webkit-transform: rotate(-35deg);
-moz-transform: rotate(-35deg);
-ms-transform: rotate(-35deg);
-o-transform: rotate(-35deg);
}
.star-pick:after {
position: absolute;
display: block;
color: black;
top: 3px;
left: -21px;
width: 0px;
height: 0px;
border-right: 20px solid transparent;
border-bottom: 14px solid black;
border-left: 20px solid transparent;
-webkit-transform: rotate(-70deg);
-moz-transform: rotate(-70deg);
-ms-transform: rotate(-70deg);
-o-transform: rotate(-70deg);
content: '';
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h2>Color Box</h2>
<div class="color" ></div>
<br/>
<p>Click a color</p>
<div class="red-circle"></div>
<div class="blue-circle"></div>
<div class="green-circle"></div>
<br/>
<p>Click a shape</p>
<div class="circle-pick"></div>
<div class="square-pick"></div>
<div class="star-pick"></div>
How can we apply 1px borders to these speech bubbles?
This similar SO post did not work here, as we use a different approach to generate the speech bubbles
.chat-messages {
width: calc(100%);
padding-bottom: 5px;
background-color: #f3f3f4;
}
.sb-time {
font-size: 10pt;
font-weight: 400;
margin: 7px -5px 0px 10px;
float: right;
}
.sb {
font-size: 13pt;
font-weight: 500;
border-radius: 6px;
display: block;
padding: 10px 15px 5px 15px;
position: relative;
vertical-align: top;
clear: both;
}
.sb::before {
content: "\00a0";
display: block;
height: 15px;
position: absolute;
top: 10px;
-moz-transform: rotate(30deg) skew(-35deg);
-ms-transform: rotate(30deg) skew(-35deg);
-o-transform: rotate(30deg) skew(-35deg);
-webkit-transform: rotate(30deg) skew(-35deg);
transform: rotate(30deg) skew(-35deg);
width: 15px;
}
.sb-0 {
background-color: #ffffff;
float: left;
margin: 5px 17% 5px 20px;
}
.sb-0::before {
background-color: #ffffff;
left: -8px;
}
.sb-1 {
background-color: #EEFFDD;
float: right;
margin: 5px 20px 5px 17%;
}
.sb-1::before {
background-color: #EEFFDD;
right: -8px;
}
<div class="chat-messages" style="max-height: 472px; overflow: hidden; width: auto; height: 472px;">
<div class="sb sb-text sb-0">Hi
<div class="sb-time">09:16</div>
</div>
<div class="sb sb-text sb-0">Fine. Thnks
<div class="sb-time">09:19</div>
</div>
<div class="sb sb-text sb-1">What subject u are talking about ?
<div class="sb-time">09:19</div>
</div>
</div>
Have a look at this Jsfiddle.
These are the changes I made:
.sb {
border: 1px solid #000;
}
.sb::before {
height: 12px;
top: 12px;
border-left: 1px solid #000;
border-bottom: 1px solid #000;
}
.sb-0 {
background-color: #ffffff;
float: left;
margin: 5px 17% 5px 20px;
}
.sb-0::before {
left: -9px;
}
EDIT
Updated Jsfiddle to contain the bubble on the right side also.
UPDATE
Prefixes for transform 2D are no longer needed, see CanIUse
.sb {
....
border: 1px solid red;
}
.sb-0::before {
....
border-left: 1px solid red;
border-bottom: 1px solid red;
transform: rotate(35deg) skew(-25deg) translate(-1px, 0);
width: 16px;
height: 14px;
}
.sb-1::before {
....
border-right: 1px solid red;
border-top: 1px solid red;
transform: rotate(35deg) skew(-25deg) translate(1px, 0);
width: 16px;
height: 14px;
}
SNIPPET
body {
background: #000;
}
.chat-messages {
width: calc(100%);
padding-bottom: 5px;
background-color: #666;
}
.sb-time {
font-size: 10pt;
font-weight: 400;
margin: 7px -5px 0px 10px;
float: right;
}
.sb {
font-size: 13pt;
font-weight: 500;
border-radius: 6px;
display: block;
padding: 10px 15px 5px 15px;
position: relative;
vertical-align: top;
clear: both;
border: 1px solid red;
}
.sb-0:before {
content: "\00a0";
display: block;
position: absolute;
top: 10px;
transform: rotate(25deg) skew(-35deg) translate(-1px, 0);
width: 16px;
height: 14px;
border-left: 1px solid red;
border-bottom: 1px solid red;
}
.sb-1:before {
content: "\00a0";
display: block;
position: absolute;
top: 10px;
transform: rotate(25deg) skew(-35deg) translate(1px, 0);
width: 16px;
height: 14px;
border-right: 1px solid red;
border-top: 1px solid red;
}
.sb-0 {
background-color: #ffffff;
float: left;
margin: 5px 17% 5px 20px;
}
.sb-0::before {
background-color: #ffffff;
left: -8px;
}
.sb-1 {
background-color: #EEFFDD;
float: right;
margin: 5px 20px 5px 17%;
}
.sb-1::before {
background-color: #EEFFDD;
right: -8px;
}
<div class="chat-messages" style="max-height: 472px; overflow: hidden; width: auto; height: 472px;">
<div class="sb sb-text sb-0">Hi
<div class="sb-time">09:16</div>
</div>
<div class="sb sb-text sb-0">Fine. Thnks
<div class="sb-time">09:19</div>
</div>
<div class="sb sb-text sb-1">What subject u are talking about ?
<div class="sb-time">09:19</div>
</div>
</div>