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 follow this link How to get 'div' shaped as a flag with CSS but now I can't remove dotted line. The code:
div {
height: 100px;
width: 100px;
margin: 100px auto;
position: relative;
overflow: hidden;
border: solid 3px #000;
border-bottom: none;
text-align: center;
}
div:before,
div:after {
content: '';
display: block;
height: 100%;
width: 200%;
transform: rotate(20deg);
box-shadow: 46px 0 0 3px #000;
position: absolute;
top: 1px;
right: -120%;
}
div:after {
transform: rotate(-20deg);
left: -120%;
box-shadow: -46px 0 0 3px #000;
}
<div>Test</div>
Setting background: #fff seems to fix the issue. Apply z-index: -1 too, so that the content isn't covered by the :before and :after now that they're not transparent.
div {
height: 100px;
width: 100px;
margin: 100px auto;
position: relative;
overflow: hidden;
border: solid 3px #000;
border-bottom: none;
text-align: center;
}
div:before,
div:after {
content: '';
display: block;
height: 100%;
width: 200%;
transform: rotate(20deg);
box-shadow: 46px 0 0 3px #000;
position: absolute;
top: 1px;
right: -120%;
/* Setting the background
covers the "dotted line" */
background: #fff;
/* It also covers the content
so we need to move it underneath
with z-index */
z-index: -1;
}
div:after {
transform: rotate(-20deg);
left: -120%;
box-shadow: -46px 0 0 3px #000;
}
<div>Test</div>
I was experimenting some fancy CSS effects before apply to an ongoing application and I came across Ribbons.
By itself, it works perfectly but I wouldn't use a fixed element as suggested by the generator so I added an image to the main box
However, the images of the application in which I would be adding this feature are not of the same size yet, so I decided to change the old <img>for CSS background images and then make use of background-size property.
But sometimes the background image is overflowing the dimensions of box. It would be just a matter of add an overflow: hidden in #preview and everything would be solved, but if I do that the "curves" of the Ribbon disappear.
How could I change that? Here's the current test code, although for some reason the background is not loading, not in here nor in JSFiddle.
#preview {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
border: 3px solid #000;
display: block;
/*overflow: hidden;*/
perspective: 1000px;
position: relative;
height: 260px;
width: 365px;
}
.front {
background-repeat: no-repeat;
background-size: cover;
background-position: 50% 50%;
background-image: url( 'https://photos.smugmug.com/Dog-Shows/BTB-September2013-Sunday/BTB-UKC-Alaskan-Klee-Kai/i-xFmLHS8/0/S/889_MG_6212a-889-S.jpg' );
}
.ribbon {
position: absolute;
left: -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; left: -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 id="preview">
<div class="ribbon">
<span>POPULAR</span>
</div>
<div class="front"></div>
</div>
The image goes to .front because I also intend to use David Walsh's Card Fliping technique, which is already working in parallel and I believe is not relevant to the case.
Even setting background-size to containmade the image overflow, but this value is not desirable as it won't cover like the currentlt defined value.
.front is just a text container. you need to apply background image to #preview
#preview {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
border: 3px solid #000;
display: block;
/*overflow: hidden;*/
perspective: 1000px;
position: relative;
height: 260px;
width: 365px;
background-repeat: no-repeat;
background-size: cover;
background-position: 50% 50%;
background-image: url( 'https://photos.smugmug.com/Dog-Shows/BTB-September2013-Sunday/BTB-UKC-Alaskan-Klee-Kai/i-xFmLHS8/0/S/889_MG_6212a-889-S.jpg' );
}
.front {
color: white;
}
.ribbon {
position: absolute;
left: -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; left: -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 id="preview">
<div class="ribbon">
<span>POPULAR</span>
</div>
<div class="front">FRONT DIV Lorem ipsum la-la-la</div>
</div>
Or you need to define width and height for .front:
#preview {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
border: 3px solid #000;
display: block;
/*overflow: hidden;*/
perspective: 1000px;
position: relative;
height: 260px;
width: 365px;
}
.front {
background-repeat: no-repeat;
background-size: cover;
background-position: 50% 50%;
background-image: url( 'https://photos.smugmug.com/Dog-Shows/BTB-September2013-Sunday/BTB-UKC-Alaskan-Klee-Kai/i-xFmLHS8/0/S/889_MG_6212a-889-S.jpg' );
height: 260px;
width: 365px;
}
.ribbon {
position: absolute;
left: -8px; top: -8px;
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; left: -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 id="preview">
<div class="ribbon">
<span>POPULAR</span>
</div>
<div class="front"></div>
</div>
I have the following code that I took from http://cssdeck.com/labs/pure-css3-smooth-ribbon-with-borders
The HTML Code is:
<div id="ribbon">
<div class="inset"></div>
<div class="container">
<div class="base"></div>
<div class="left_corner"></div>
<div class="right_corner"></div>
</div>
The CSS Code is:
#ribbon {
width: 180px;
height: 280px;
margin: 0px;
position: relative;
overflow: hidden;
}
#ribbon .inset {
width: 200px;
height: 55px;
position: absolute;
top: -50px;
left: -10px;
z-index: 5;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
background: rgba(0,0,0,0.3);
box-shadow: 0px 5px 10px 0px rgba(0,0,0,0.3);
-moz-box-shadow: 0px 5px 10px 0px rgba(0,0,0,0.3);
-webkit-box-shadow: 0px 5px 10px 0px rgba(0,0,0,0.3);
}
#ribbon .container {
position: relative;
width: 100px;
height: 250px;
overflow: hidden;
margin: 0 auto;
border-left: 1px solid #631a15;
border-right: 1px solid #631a15;
}
#ribbon .base {
height: 200px;
width: 100px;
background: rgb(199,59,60);
background: -moz-linear-gradient(top, rgba(199,59,60,1) 0%, rgba(184,32,31,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(199,59,60,1)), color-stop(100%,rgba(184,32,31,1)));
background: -webkit-linear-gradient(top, rgba(199,59,60,1) 0%,rgba(184,32,31,1) 100%);
background: -o-linear-gradient(top, rgba(199,59,60,1) 0%,rgba(184,32,31,1) 100%);
background: -ms-linear-gradient(top, rgba(199,59,60,1) 0%,rgba(184,32,31,1) 100%);
background: linear-gradient(top, rgba(199,59,60,1) 0%,rgba(184,32,31,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c73b3c', endColorstr='#b8201f',GradientType=0 );
position: relative;
z-index: 2;
}
#ribbon .base:after {
content: '';
position: absolute;
top: 0;
width: 86px;
left: 6px;
height: 242px;
border-left: 1px dashed #631a15;
border-right: 1px dashed #631a15;
}
#ribbon .base:before {
content: '';
position: absolute;
top: 0;
width: 86px;
left: 7px;
height: 242px;
border-left: 1px dashed #da5050;
border-right: 1px dashed #da5050;
}
#ribbon .left_corner {
width: 100px;
height: 100px;
background: #b8201f;
position: absolute;
bottom: 20px;
left: -50px;
z-index: 1;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
#ribbon .right_corner {
width: 100px;
height: 100px;
background: #b8201f;
position: absolute;
bottom: 20px;
right: -50px;
z-index: 1;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
I want to increase the width (to 250px) and decrease the height (to 140px) of the ribbon.
how can i do this?
i am still studying CSS.
I also want to insert an image on top of the ribbon that is formed by the above coding.
Please help!
Here you go bro :) Check the DEMO1
DEMO2
#ribbon .base {
height: 140px;
width: 250px;
}
Have changed the .left_arrow and .right_arrow values to make it fit. Check it on Fiddle and ask me if you want any clarifications.
Width 250px and height 140px is done..
See this fiddle
HTML
<div id="ribbon">
<div class="inset"></div>
<div class="container">
<div class="base"></div>
<div class="left_corner"></div>
<div class="right_corner"></div>
</div>
</div>
CSS
#ribbon {
width: 350px;
height: 280px;
margin: 50px auto 0;
position: relative;
overflow: hidden;
}
#ribbon .container {
position: relative;
width: 250px;
height: 140px;
overflow: hidden;
margin: 0 auto;
border-left: 1px solid #631a15;
border-right: 1px solid #631a15;
}
#ribbon .base {
height: 80px;
width: 250px;
background: rgb(99,59,60);
background: -moz-linear-gradient(top, rgba(199,59,60,1) 0%, rgba(184,32,31,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(199,59,60,1)), color-stop(100%,rgba(184,32,31,1)));
background: -webkit-linear-gradient(top, rgba(199,59,60,1) 0%,rgba(184,32,31,1) 100%);
background: -o-linear-gradient(top, rgba(199,59,60,1) 0%,rgba(184,32,31,1) 100%);
background: -ms-linear-gradient(top, rgba(199,59,60,1) 0%,rgba(184,32,31,1) 100%);
background: linear-gradient(top, rgba(199,59,60,1) 0%,rgba(184,32,31,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c73b3c', endColorstr='#b8201f',GradientType=0 );
position: relative;
z-index: 2;
}
#ribbon .base:after {
content: '';
position: absolute;
top: 0;
width: 234px;
left: 6px;
height: 132px;
border-left: 1px dashed #631a15;
border-right: 1px dashed #631a15;
}
#ribbon .base:before {
content: '';
position: absolute;
top: 0;
width: 234px;
left: 7px;
height: 132px;
border-left: 1px dashed #da5050;
border-right: 1px dashed #da5050;
}
#ribbon .left_corner {
width: 150px;
height: 100px;
background: #b8201f;
position: absolute;
bottom: 15px;
left: -45px;
z-index: 1;
-webkit-transform: rotate(50deg);
-moz-transform: rotate(50deg);
-ms-transform: rotate(50deg);
-o-transform: rotate(50deg);
transform: rotate(145deg);
}
#ribbon .right_corner {
width: 150px;
height: 100px;
background: #b8201f;
position: absolute;
bottom: 15px;
right: -45px;
z-index: 1;
-webkit-transform: rotate(35deg);
-moz-transform: rotate(35deg);
-ms-transform: rotate(35deg);
-o-transform: rotate(35deg);
transform: rotate(35deg);
}
#ribbon .inset {
width: 400px;
height: 55px;
position: absolute;
top: -50px;
left: -20px;
z-index: 5;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
background: rgba(0,0,0,0.3);
box-shadow: 0px 5px 10px 0px rgba(0,0,0,0.3);
-moz-box-shadow: 0px 5px 10px 0px rgba(0,0,0,0.3);
-webkit-box-shadow: 0px 5px 10px 0px rgba(0,0,0,0.3);
}
I'm playing around trying to draw a simple folder icon with CSS, and this is where I'm at:
/* CSS */
.container {
border: solid 1px #000;
width: 100px;
height: 100px;
padding: 5px;
text-align: center;
}
.folder_tab, .folder {
margin: 0 auto;
background-color: #708090;
}
.folder_tab {
width: 25px;
height: 5px;
margin-right: 50%;
border-radius: 5px 15px 0 0;
}
.folder {
width: 50px;
height: 35px;
border-radius: 0 5px 5px 5px;
box-shadow: 1px 1px 0 1px #CCCCCC;
}
<!-- HTML -->
<div class="container">
<div class="folder_tab"></div>
<div class="folder"></div>
text
</div>
Result:
Is there a simpler, or more elegant way to do this?
This is my solution, if you want to use CSS3.
HTML
<div class="folder"></div>
CSS
.folder {
width: 150px;
height: 105px;
margin: 0 auto;
margin-top: 50px;
position: relative;
background-color: #708090;
border-radius: 0 6px 6px 6px;
box-shadow: 4px 4px 7px rgba(0, 0, 0, 0.59);
}
.folder:before {
content: '';
width: 50%;
height: 12px;
border-radius: 0 20px 0 0;
background-color: #708090;
position: absolute;
top: -12px;
left: 0px;
}
DEMO (tested in Chrome)
I know this thread is a bit old, but I bounced into this question by asking myself if there was something simple in pure CSS and minimalistic HTML to update my old tree library which uses background images for icons.
I tried by myself and I came up with something in line with the flat design which today is revolutioning cross-devices UI's:
https://jsfiddle.net/landzup/Lzjadp5r/
It is just a suggestion or a starting point, but it is amazing watching the page not losing a single pixel of resolution by zooming in as much as possible! (Just like vector graphics).
I used a brief HTML:
<div class="folder">
<div class="icon"></div>
Programming
</div>
And this is the CSS:
<style type="text/css">
.folder {
display: block;
position: relative;
top: 0;
left: 0;
margin: 18px 0;
font: 18px helvetica, arial, sans-serif;
text-indent: 27px;
line-height: 34px;
}
.folder .icon {
content: "";
display: block;
float: left;
position: relative;
top: 0;
left: 0;
width: 30px;
height: 30px;
border: 2px solid #999;
background: #ddd;
-moz-border-radius: 2px; -webkit-border-radius: 2px; -o-border-radius: 2px; border-radius: 2px;
-moz-transform: scale(1) rotate(0deg) translateX(10px) skewX(10deg);
-webkit-transform: scale(1) rotate(0deg) translateX(10px) skewX(10deg);
-o-transform: scale(1) rotate(0deg) translateX(10px) skewX(10deg);
-ms-transform: scale(1) rotate(0deg) translateX(10px) skewX(10deg);
transform: scale(1) rotate(0deg) translateX(10px) skewX(10deg);
}
.folder .icon::after {
content: "";
display: block;
position: relative;
top: 7px;
left: -6px;
width: 30px; height: 21px;
border: 2px solid #999;
background: #ddd;
-moz-border-radius: 2px; -webkit-border-radius: 2px; -o-border-radius: 2px; border-radius: 2px;
-moz-transform: scale(1) rotate(0deg) translateX(10px) skewX(-20deg);
-webkit-transform: scale(1) rotate(0deg) translateX(10px) skewX(-20deg);
-o-transform: scale(1) rotate(0deg) translateX(10px) skewX(-20deg);
-ms-transform: scale(1) rotate(0deg) translateX(10px) skewX(-20deg);
transform: scale(1) rotate(0deg) translateX(10px) skewX(-20deg);
}
</style>
It uses CSS 3 transformations, so you should consider your target audience to support its browsers.
Here there are CSS compatibility tables for CSS transformation:
http://caniuse.com/#feat=transforms2d
Here is my solution:
http://jsfiddle.net/wQdgs/
HTML
<div>text</div>
CSS
div {
width: 100px;
height: 50px;
padding-top: 50px;
border: solid 1px #000;
position: relative;
text-align: center;
}
div:after {
content: " ";
width: 50px;
height: 35px;
border-radius: 0 5px 5px 5px;
box-shadow: 1px 1px 0 1px #CCCCCC;
display: block;
background-color: #708090;
position: absolute;
top: 15px;
left: 25px;
}
div:before {
content: " ";
width: 25px;
height: 5px;
border-radius: 5px 15px 0 0;
display: block;
background-color: #708090;
position: absolute;
top: 10px;
left: 25px;
}