I have the folowing structure:
.wrapper{
position: relative;
margin: 20px;
}
#bottomBar{
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
z-index: -40;
}
#percentageText{
position: absolute;
z-index: 9;
margin-top: 37px;
left: 20px;
background-color: red;
}
<div class="wrapper">
<div class="ldBar"
data-type="fill"
style="margin: 0 auto;"
id="bottomBar"
data-fill-dir="ltr"
data-path="M10 10 H 790 V 90 H 10 L 10 10 M10 10 A 5 5 0 0 0 10 90 M 790 10 a 5 5 0 0 1 0 80"
data-fill-background="rgba(0, 0, 0, 0.0)"
data-fill="red"></div>
<div id="percentageText"></div>
</div>
the text in percentage text is controlled by a JS script that works. I want to change the background of the div where the text is
However background-color does nothing whatsoever to the div of the text.
What am i doing wrong?
set height and width for your div and test it again!you can use below css.
.wrapper{
position: relative;
margin: 20px;
}
#bottomBar{
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
z-index: -40;
}
#percentageText{
position: absolute;
z-index: 9;
margin-top: 37px;
left: 20px;
background-color: red;
height:100px;
width:100%;
}
<div class="wrapper">
<div class="ldBar"
data-type="fill"
style="margin: 0 auto;"
id="bottomBar"
data-fill-dir="ltr"
data-path="M10 10 H 790 V 90 H 10 L 10 10 M10 10 A 5 5 0 0 0 10 90 M 790 10 a 5 5 0 0 1 0 80"
data-fill-background="rgba(0, 0, 0, 0.0)"
data-fill="red"></div>
<div id="percentageText"></div>
</div>
You are changing the background color of the div #percentageText.
Your color red is not showing because the div is empty. Try adding some text inside #percentageText, or increase the width of the element, and your color will become visible.
Looks like there is a bug in HTML classes. Try the same thing using an ID instead of a class. I had the same problem. Classes did not work. An ID did. If this is indeed a bug in HTML (JS, CSS), it needs to be fixed urgently.
Related
I want to do an inverted border radius using a background, like so:
Here is my code:
.curved {
background: #D3041E;
height: 200px;
width: 100%;
position: relative;
}
.curved::before {
content: '';
border-bottom-left-radius: 50% 100%;
border-bottom-right-radius: 50% 100%;
position: absolute;
top: 0;
width: 100%;
background: #fff;
height: 3%;
}
<div class="curved">
</div>
and here's what I get so far:
Since you have no fine control on the curve made by border radius, the next best option could be drawing splines with svg.
I made a very simple path with a basic bezier curve for the sake of this example. There are further details here:
https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths
Frankly speaking the path I chose may not perfectly match with your expected result, anyway feel free to walk through this path (no pun intended) if you can't find the solution aimed for using the magics of borders and you want to consider a different option.
I also added a range slider to show how to alter the curve in real time keeping in mind that here I have only one control point for the bezier curve that I'm simply shifting on the y axis.
const slider = document.querySelector('input[type=range]');
slider.addEventListener('input',(event)=>{
changeCurve(event.target.value);
});
function changeCurve(y){
const d = `M 0 0 Q 50 ${y} 100 0`;
document.querySelector('.curved svg path')
.setAttribute('d', d);
}
.curved{
background: #D3041E;
height: 200px;
position: relative;
border: solid 8px black;
border-top: none;
margin: 1em;
}
.slider {
display: flex;
justify-content: center;
align-items: center;
border: solid;
}
input[type=range]{
cursor: pointer;
margin: 1em;
}
<div class="slider">
<label>Change the curve:</label>
<input
id="slider"
type="range"
value="50"
min="0"
max="100"
step="1">
</div>
<div class="curved">
<svg width="100%" viewBox="0 0 100 100">
<path d="M 0 0 Q 50 5 100 0" fill="white" />
</svg>
</div>
I have a logo I created using a div and two letters which I want to move inside the coral colored div. However every time I change left/right properties or margin/padding I end up changing the letter placement in the design.
I tried playing around with the CSS using developer tools but I'm still having trouble.
Is there a better way I could use to move the logo itself and maybe make it a big smaller inside the coral div? This is what I'm trying to do screenshot. *note: screenshot is from Figma but I'm trying to code what it looks like
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<!-- Faustina-->
<link href='https://fonts.googleapis.com/css?family=Faustina' rel='stylesheet'>
<!-- Didact Gothic -->
<link href='https://fonts.googleapis.com/css?family=Didact Gothic' rel='stylesheet'>
<!-- Encode Sans Semi Condensed -->
<link href='https://fonts.googleapis.com/css?family=Encode Sans Semi Condensed' rel='stylesheet'>
<!-- Stylesheet -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="parent">
<!-- Description -->
<div class="description">
<div class="d">DESCRIPTION</div>
</div>
<!-- Logo -->
<div class="logo">
<div class="logo-container">
<div class="box">
<div class="letter-c">C</div>
<div class="letter-p">P</div>
</div>
</div>
</div>
<!-- Navigation -->
<div class="tabs">
<nav>
<ul>
<li>About</li>
<li>Projects</li>
<li>Blog</li>
<li>Resume</li>
</ul>
</nav>
</div>
<!-- Icon -->
<div class="icon"> </div>
<!-- Contact-Footer -->
<div class="contact">
<footer>
<div class="icon-container"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" class="linkedin-icon">
<!--! Font Awesome Pro 6.1.1 by #fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. -->
<path d="M416 32H31.9C14.3 32 0 46.5 0 64.3v383.4C0 465.5 14.3 480 31.9 480H416c17.6 0 32-14.5 32-32.3V64.3c0-17.8-14.4-32.3-32-32.3zM135.4 416H69V202.2h66.5V416zm-33.2-243c-21.3 0-38.5-17.3-38.5-38.5S80.9 96 102.2 96c21.2 0 38.5 17.3 38.5 38.5 0 21.3-17.2 38.5-38.5 38.5zm282.1 243h-66.4V312c0-24.8-.5-56.7-34.5-56.7-34.6 0-39.9 27-39.9 54.9V416h-66.4V202.2h63.7v29.2h.9c8.9-16.8 30.6-34.5 62.9-34.5 67.2 0 79.7 44.3 79.7 101.9V416z" /></svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512" class="github-icon">
<!--! Font Awesome Pro 6.1.1 by #fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. -->
<path d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z" /></svg>
</div>
</footer>
</div>
</body>
</html>
CSS
.parent {
display: grid;
grid-template-columns: repeat(5, 1fr);
grid-template-rows: repeat(5, 1fr);
grid-column-gap: 0px;
grid-row-gap: 0px;
}
/****************************************************************/
/* Logo */
.logo {
grid-area: 1 / 1 / 2 / 2;
background-color: lightcoral;
}
.logo-container {
margin: 20px;
width: 100px;
height: 100px;
left: 100px;
top: 56px;
}
.letter-c {
position: absolute;
width: 31px;
height: 63px;
left: 26px;
top: 8px;
font-family: 'Faustina';
font-style: normal;
font-weight: 400;
font-size: 50px;
line-height: 63px;
/* identical to box height */
color: #DEC3C3;
-webkit-text-stroke: 2px white;
}
.letter-p {
position: absolute;
width: 27px;
height: 66px;
left: 47px;
top: 29px;
font-family: 'Didact Gothic';
font-style: normal;
font-weight: 400;
font-size: 50px;
line-height: 66px;
/* identical to box height */
color: #FFFFFF;
}
.box {
position: absolute;
width: 100px;
height: 100px;
left: 0px;
top: 0px;
background: #DEC3C3;
}
/****************************************************************/
/* Navigation */
.tabs {
grid-area: 1 / 2 / 2 / 6;
background-color: lightgreen;
}
ul {
list-style: none;
text-align: right;
margin: 20px;
}
li {
display: inline-block;
padding: 0px 10px;
font-family: 'Encode Sans Semi Condensed';
font-style: normal;
font-weight: 500;
font-size: 18px;
color: black;
}
/****************************************************************/
/* Description */
.description {
grid-area: 2 / 1 / 5 / 3;
background-color: red;
}
/****************************************************************/
/* Icon */
.icon {
grid-area: 2 / 3 / 5 / 6;
background-color: lightblue;
}
/****************************************************************/
/* Contact-Footer */
.contact {
grid-area: 5 / 1 / 6 / 6;
background-color: lightseagreen;
}
svg {
position: absolute;
width: 32px;
height: 32px;
color: #DEC3C3;
}
footer {
position: absolute;
width: 200px;
height: 50px;
left: 620px;
top: 942px;
}
.icon-container {
position: absolute;
width: 200px;
height: 50px;
left: 0px;
bottom: 0px;
background: rgba(222, 195, 195, 0.2);
border-radius: 30px;
}
.github-icon {
left: 132px;
bottom: 10px;
}
.linkedin-icon {
left: 42px;
bottom: 10px;
}
Make the following changes to .logo-container {...}:
Inside .logo-container {...}, include position: relative (to make absolute postioning of .box with respect to it, work). Then remove the margin, left and right values.
The margin property isn't necessary in .logo-container since it will cue its margins from the grid placement of its parent .logo.
The left and right properties aren't needed as well for the same reason as above (and also since, setting position: relative produces defaults of top: 0 and left: 0); remember, you are trying to position the .box div which houses the letters, not .logo-container itself. You should rather position .box from its own rule set.
If you need padding around .logo-container set it within its parent: .logo
Here's what .logo-container rule should look like:
.logo-container {
position: relative;
width: 100px;
height: 100px;
}
.box {
// Position me (w/ margin, left and right) from here instead
// if you wish to.
}
.logo {
...
// put padding around .logo-container here.
}
And Voilà! Problem fixed!
If you want the .parent div to take the full height of the viewport (i.e screen), you may set height: 100vh in its CSS rule:
.parent {
...
height: 100vh;
}
Alternatively (much better way):
html,
body {
height: 100%;
}
.parent {
height: 100%;
}
If you need to remove browser default box-sizing, margin and padding properties, then add this rule set at the top of your CSS file or section:
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
I cannot make the inside div to get the whole available space. The idea is to have a "tile" at the middle of the screen and all the content inside, taking all available space minus the padding, no matter the size of the screen, scrolled if necessary. The title is displayed vertically at the side of the tile. I cannot make it work - either the content is small and does not take all available space or takes to much space and does not scroll on small screen but overflow the tile. Adding "overflow: scroll" to the "wrapper" class hides the title. I am going in rounds.
<div class="block block_tile">
<section>
<div class="wrapper">
<h3 class="title">My Service</h3>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><!--! Font Awesome Pro 6.0.0 by #fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M575.8 255.5C575.8 273.5 560.8 287.6 543.8 287.6H511.8L512.5 447.7C512.5 450.5 512.3 453.1 512 455.8V472C512 494.1 494.1 512 472 512H456C454.9 512 453.8 511.1 452.7 511.9C451.3 511.1 449.9 512 448.5 512H392C369.9 512 352 494.1 352 472V384C352 366.3 337.7 352 320 352H256C238.3 352 224 366.3 224 384V472C224 494.1 206.1 512 184 512H128.1C126.6 512 125.1 511.9 123.6 511.8C122.4 511.9 121.2 512 120 512H104C81.91 512 64 494.1 64 472V360C64 359.1 64.03 358.1 64.09 357.2V287.6H32.05C14.02 287.6 0 273.5 0 255.5C0 246.5 3.004 238.5 10.01 231.5L266.4 8.016C273.4 1.002 281.4 0 288.4 0C295.4 0 303.4 2.004 309.5 7.014L564.8 231.5C572.8 238.5 576.9 246.5 575.8 255.5L575.8 255.5z"/></svg>
<div class="content">
<h1>Welcome to Our page. Please log in.</h1>
<button type="submit" name="_continue" class="btn btn-primary">Login</button>
<p>
You can register here.
</p>
</div>
</div>
</section>
</div>
css:
.wrapper {
display: flex;
flex-direction: column;
background-color: $white;
margin: auto;
min-width: 72rem;
max-height: 85vh;
width: 72rem;
min-height: 60rem;
position: absolute;
top: 20%;
border: 4px solid $primary;
padding: 6rem 8rem 6rem 8rem;
color: $dark;
font-size: small;
.content {
display: flex;
flex-direction: column;
justify-content: space-around;
max-height: 100%;
overflow: scroll;
overflow-x: hidden;
h1+p {
margin-top: -2.5rem;
margin-bottom: 5rem;
}
&::-webkit-scrollbar {
display: none;
}
h2 {
margin-bottom: 2rem;
font-style: normal;
font-weight: normal;
font-size: 1.6rem;
line-height: 3rem;
text-align: justify;
}
}
.title {
font-weight: 600;
font-size: 2.5rem;
line-height: 3.8rem;
color: $white;
position: absolute;
bottom: -.5rem;
left: 0;
transform: rotate(270deg);
transform-origin: 0 4rem;
}
Here I'm trying to position an SVG icon over a CSS border, but I'm facing a problem with the CSS border. As per the design, the border should be in the background, and the icon will be in front. I'm trying to solve using z-index!
Design
Output
.se-venue-cta {
width: 300px;
text-align: center;
margin: 5% auto;
background: #000;
background: #FFF1EA;
box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.25);
padding: 20px;
position: relative;
z-index: 2;
}
.se-venue-cta-text p {
color: #FE6F48;
text-align: center;
}
.se-venue-cta-text {
border: 2px solid #FE6F48;
border-radius: 10px;
margin-bottom: 30px;
}
.se-venue-cta-btn {
height: 44px;
}
.se-venue-cta-btn a {
transition: all 0.3s ease-in-out;
display: flex;
background: #FE6F48;
border-radius: 6px;
height: 100%;
justify-content: center;
align-items: center;
text-decoration: none;
color: #ffffff;
font-weight: bold;
font-size: 16px;
}
span {
display: block;
position: absolute;
left: 50%;
top: 8px;
transform: translateX(-50%);
z-index: 999;
overflow: hidden;
}
<div class="se-venue-cta">
<div class="se-venue-cta-text">
<p> The average wedding costs $33,900. Get a quote now and let us plan you a beautiful elopement, while saving you over $28,000</p>
</div>
<div class="se-venue-cta-btn">
Get a Quote
</div>
<!-- svg icon -->
<span>
<svg width="20" height="27" viewBox="0 0 20 27" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.7889 15.4035C12.6086 15.6051 12.4191 15.798 12.2211 15.9818C11.6767 15.1346 11.5056 13.9309 11.8133 12.8475C12.0244 12.1027 12.5644 11.1263 13.39 10.8225C14.1 10.5615 14.6111 11.1791 14.6856 11.8305C14.8344 13.1242 12.79 15.4035 12.79 15.4035H12.7889ZM13.1056 18.3938C13.9133 18.7054 14.7944 18.7301 15.7156 18.4556C16.3041 18.2729 16.8621 18.0017 17.3711 17.6512C14.41 22.5911 10 27 10 27C10 27 5.66778 22.6688 2.70556 17.7806C3.57333 17.4521 4.46778 16.5656 5.37333 15.129C5.97556 14.175 6.55889 13.0028 7.03889 11.8046L7.1 11.9216C7.16667 12.0566 7.23556 12.1916 7.30444 12.3266C7.82667 13.3571 8.36778 14.4214 8.47111 15.4991C8.53444 16.1764 8.26444 16.3913 8.17445 16.4621C7.71889 16.8221 6.70778 16.8435 5.71222 16.5139C5.57924 16.4695 5.43609 16.4669 5.30162 16.5064C5.16715 16.546 5.04767 16.6259 4.95889 16.7355C4.87133 16.8441 4.81936 16.9777 4.8102 17.1176C4.80104 17.2575 4.83515 17.3969 4.90778 17.5163C5.63 18.6997 6.97444 19.1677 8.27222 19.1677C8.76111 19.1677 9.24333 19.1014 9.68333 18.9821C10.51 18.7571 11.3322 18.3622 12.1011 17.8301H12.1033C12.4105 18.063 12.7477 18.2523 13.1056 18.3926V18.3938ZM10 0C15.5222 0 20 3.49537 20 10.2487C20 10.8934 19.9089 11.5673 19.7444 12.2591C19.2233 14.1401 17.2956 16.5578 15.3222 17.1461C15.0599 17.2262 14.7883 17.2705 14.5144 17.2778C14.2898 17.283 14.0654 17.2569 13.8478 17.2001C13.6313 17.1424 13.4235 17.0554 13.23 16.9414L13.2122 16.9301C13.42 16.7355 13.6211 16.5296 13.8144 16.3136L13.8678 16.2551C14.9367 15.0626 16.2678 13.5776 16.05 11.6764C15.9544 10.8371 15.5111 10.1014 14.8644 9.70537C14.2844 9.34987 13.5922 9.29138 12.9133 9.54113C11.6067 10.0215 10.8056 11.3715 10.4911 12.4751C10.0611 13.9894 10.3244 15.6442 11.1378 16.8289C10.5778 17.2 9.96466 17.4815 9.32 17.6636C9.09778 17.7232 8.86556 17.7649 8.62889 17.7874C8.77111 17.7154 8.90445 17.6299 9.02889 17.532C9.46 17.1911 9.94889 16.5409 9.83778 15.372C9.71111 14.0355 9.08333 12.8003 8.53 11.7101L8.33 11.313C8.29087 11.2375 8.25086 11.1625 8.21 11.088C7.98778 10.6684 7.81 10.3151 7.67111 10.017L7.72667 9.86737C7.93778 9.30937 8.29 8.37337 7.66 7.70625C7.52713 7.56253 7.35976 7.4561 7.17419 7.39735C6.98862 7.3386 6.79118 7.32952 6.60111 7.371C6.44788 7.40464 6.30451 7.47403 6.18241 7.57363C6.06031 7.67323 5.96285 7.80031 5.89778 7.94475C5.68667 8.40825 5.77 9.0585 6.20333 10.0935C5.11 13.4179 3.13444 16.47 2.00222 16.5566C0.825556 14.3955 0 12.1882 0 10.2487C0 3.49537 4.47778 0 10 0Z" fill="#FF4816"/>
</svg>
</span>
</div>
Add background in span same as the background and add padding in it:
.se-venue-cta {
width: 300px;
text-align: center;
margin: 5% auto;
background: #000;
background: #FFF1EA;
box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.25);
padding: 20px;
position: relative;
z-index: 2;
}
.se-venue-cta-text p {
color: #FE6F48;
text-align: center;
}
.se-venue-cta-text {
border: 2px solid #FE6F48;
border-radius: 10px;
margin-bottom: 30px;
}
.se-venue-cta-btn {
height: 44px;
}
.se-venue-cta-btn a {
transition: all 0.3s ease-in-out;
display: flex;
background: #FE6F48;
border-radius: 6px;
height: 100%;
justify-content: center;
align-items: center;
text-decoration: none;
color: #ffffff;
font-weight: bold;
font-size: 16px;
}
span {
display: block;
position: absolute;
left: 50%;
top: 8px;
transform: translateX(-50%);
z-indix: 999;
overflow: hidden;
background
}
.svg-wrap {
background: #FFF1EA;
padding: 0 10px;
}
<div class="se-venue-cta">
<div class="se-venue-cta-text">
<p> The average wedding costs $33,900. Get a quote now and let us plan you a beautiful elopement, while saving you over $28,000</p>
</div>
<div class="se-venue-cta-btn">
Get a Quote
</div>
<!-- svg icon -->
<span class="svg-wrap">
<svg width="20" height="27" viewBox="0 0 20 27" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.7889 15.4035C12.6086 15.6051 12.4191 15.798 12.2211 15.9818C11.6767 15.1346 11.5056 13.9309 11.8133 12.8475C12.0244 12.1027 12.5644 11.1263 13.39 10.8225C14.1 10.5615 14.6111 11.1791 14.6856 11.8305C14.8344 13.1242 12.79 15.4035 12.79 15.4035H12.7889ZM13.1056 18.3938C13.9133 18.7054 14.7944 18.7301 15.7156 18.4556C16.3041 18.2729 16.8621 18.0017 17.3711 17.6512C14.41 22.5911 10 27 10 27C10 27 5.66778 22.6688 2.70556 17.7806C3.57333 17.4521 4.46778 16.5656 5.37333 15.129C5.97556 14.175 6.55889 13.0028 7.03889 11.8046L7.1 11.9216C7.16667 12.0566 7.23556 12.1916 7.30444 12.3266C7.82667 13.3571 8.36778 14.4214 8.47111 15.4991C8.53444 16.1764 8.26444 16.3913 8.17445 16.4621C7.71889 16.8221 6.70778 16.8435 5.71222 16.5139C5.57924 16.4695 5.43609 16.4669 5.30162 16.5064C5.16715 16.546 5.04767 16.6259 4.95889 16.7355C4.87133 16.8441 4.81936 16.9777 4.8102 17.1176C4.80104 17.2575 4.83515 17.3969 4.90778 17.5163C5.63 18.6997 6.97444 19.1677 8.27222 19.1677C8.76111 19.1677 9.24333 19.1014 9.68333 18.9821C10.51 18.7571 11.3322 18.3622 12.1011 17.8301H12.1033C12.4105 18.063 12.7477 18.2523 13.1056 18.3926V18.3938ZM10 0C15.5222 0 20 3.49537 20 10.2487C20 10.8934 19.9089 11.5673 19.7444 12.2591C19.2233 14.1401 17.2956 16.5578 15.3222 17.1461C15.0599 17.2262 14.7883 17.2705 14.5144 17.2778C14.2898 17.283 14.0654 17.2569 13.8478 17.2001C13.6313 17.1424 13.4235 17.0554 13.23 16.9414L13.2122 16.9301C13.42 16.7355 13.6211 16.5296 13.8144 16.3136L13.8678 16.2551C14.9367 15.0626 16.2678 13.5776 16.05 11.6764C15.9544 10.8371 15.5111 10.1014 14.8644 9.70537C14.2844 9.34987 13.5922 9.29138 12.9133 9.54113C11.6067 10.0215 10.8056 11.3715 10.4911 12.4751C10.0611 13.9894 10.3244 15.6442 11.1378 16.8289C10.5778 17.2 9.96466 17.4815 9.32 17.6636C9.09778 17.7232 8.86556 17.7649 8.62889 17.7874C8.77111 17.7154 8.90445 17.6299 9.02889 17.532C9.46 17.1911 9.94889 16.5409 9.83778 15.372C9.71111 14.0355 9.08333 12.8003 8.53 11.7101L8.33 11.313C8.29087 11.2375 8.25086 11.1625 8.21 11.088C7.98778 10.6684 7.81 10.3151 7.67111 10.017L7.72667 9.86737C7.93778 9.30937 8.29 8.37337 7.66 7.70625C7.52713 7.56253 7.35976 7.4561 7.17419 7.39735C6.98862 7.3386 6.79118 7.32952 6.60111 7.371C6.44788 7.40464 6.30451 7.47403 6.18241 7.57363C6.06031 7.67323 5.96285 7.80031 5.89778 7.94475C5.68667 8.40825 5.77 9.0585 6.20333 10.0935C5.11 13.4179 3.13444 16.47 2.00222 16.5566C0.825556 14.3955 0 12.1882 0 10.2487C0 3.49537 4.47778 0 10 0Z" fill="#FF4816"/>
</svg>
</span>
</div>
I have some CSS:
.bubbledLeft,
.bubbledRight{
position: relative;
margin-top: 3px;
max-width: 99%;
clear: both;
min-width: 99%;
}
.bubbledLeft{
float: left;
margin-right: auto;
padding: 14px 10px 4px 15px; /*position within the border*/
}
.bubbledLeft:before{
z-index: -1;
position: absolute;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
content: "";
border-width: 8px 10px 8px 17px;
border-image: url("/assets/chat/speech_bubble_left_2.png") 8 10 8 17 stretch stretch;
-webkit-border-image: url("/assets/chat/speech_bubble_left_2.png") 8 10 8 17 stretch stretch;
-moz-border-image: url("/assets/chat/speech_bubble_left_2.png") 8 10 8 17 stretch stretch;
-o-border-image: url("/assets/chat/speech_bubble_left_2.png") 8 10 8 17 stretch stretch;
}
.bubbledRight{
float: right;
margin-left: auto;
text-align: right;
text-align: left;
padding: 4px 15px 4px 15px; /*position within the border*/
}
.bubbledRight:before{
z-index: -1;
position: absolute;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
content: "";
border-width: 8px 17px 8px 10px;
border-image: url("/assets/chat/speech_bubble_right_2.png") 8 17 8 10 stretch stretch ;
-webkit-border-image: url("/assets/chat/speech_bubble_right_2.png") 8 17 8 10 stretch stretch ;
-moz-border-image: url("/assets/chat/speech_bubble_right_2.png") 8 17 8 10 stretch stretch ;
-o-border-image: url("/assets/chat/speech_bubble_right_2.png") 8 17 8 10 stretch stretch ;
}
HTML:
<div class="content">
<textarea id="messageText" rows="3" style="width: 80%; resize: none; height: 40px; border: 0px; position: fixed; top: 0px; left: 0px; z-index: 999;" >Napisz wiadomość...</textarea>
<button id="sendMsgBtn-ajax" class="sendMsgBtn">Wyślij</button>
<div class="commentArea" id="commentArea">
<% #msgs.each do |m| %>
<% if (current_user.blank? == false && m.user.blank? == false && m.user.email == current_user.email) %>
<div class="bubbledRight">
<%= m.body %>
<br />
<div class="date-right"><%= m.created_at.to_time.strftime("%Y-%m-%d %H:%M") %></div>
<div class="nick-right"> ~<%= m.user.blank? == false ? m.user.email : "gość" %></div>
</div>
<br />
<% else %>
<div class="bubbledLeft">
<%= m.body %>
<br />
<div class="date"><%= m.created_at.to_time.strftime("%Y-%m-%d %H:%M") %></div>
<div class="nick"> ~<%= m.user.blank? == false ? m.user.email : "gość" %></div>
</div>
<br />
<% end %>
<% end %>
</div>
</div>
It works perfectly on Chrome, Opera and Safari but it doesn't on Firefox. Why ?
Screenshots (left chrome right firefox): http://ge.tt/7dGLW7U?c
Firefox doesn't seem to like having border-width on its own without other border properties. Try adding this line before your border-width line:
border:solid transparent;
UPDATE:
The latest CSS3 spec says that the border image should not be displayed in the middle of the box, so Firefox's implementation is correct. To show the border image in the whole box, add the fill value for the border-image-slice property, or use the fill keyword in the border-image shorthand. The following CSS should work for you:
-webkit-border-image: url("speech_bubble_left_2.png") 8 10 8 17 fill stretch;
-moz-border-image: url("speech_bubble_left_2.png") 8 10 8 17 fill stretch;
-o-border-image: url("speech_bubble_left_2.png") 8 10 8 17 stretch;
border-image: url("speech_bubble_left_2.png") 8 10 8 17 fill stretch;
Note that Opera doesn't support fill yet but it will work if you just use stretch on its own. Also, it's better to put the non-prefixed property last for browsers that support it, as this is the order that CSS rules are parsed.