So, first of all i have a webpage with the "Parallax" effect, that effect with scrolling pages.
I have 2 problems:
1) I have a button that shows/hides a menu bar with javascript.
$(".show").click(function(){
$("nav").fadeToggle();
});
The button works perfectly till i scroll the page. At this moment it stops working. I have the button position fixed so i want it to be always on the screen. And the menu bar fades in/out when i scroll. So when i scroll down to the next page i want to have that button to show/hide the menu, but it doesn't work. It works only when the page is scrolled all the way top.
2) Today i tried to open my project on another computer with a monitor with a lower resolution, and i noticed that everything is messed up. As messed up as when i try to resize the window if you know what i mean. The elements from the first page goes down to the seconds.. and so on. How can i solve this problem?
body,
html {
height: 100%;
}
.parallax {
background-image: url('http://www.uniwallpaper.com/static/images/238870_q1e05Ar.jpg');
height: 100%;
margin: 0;
/* Create the parallax scrolling effect */
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.parallax1 {
background-image: url('http://www.uniwallpaper.com/static/images/eiffel-tower-wallpaper-18_fRZLW4V.jpg');
height: 100%;
margin: 0;
/* Create the parallax scrolling effect */
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.parallax2 {
background-image: url('http://www.uniwallpaper.com/static/images/eWtfMME_jJm8t1k.png');
height: 100%;
margin: 0;
/* Create the parallax scrolling effect */
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.parallax3 {
background-image: url('http://www.uniwallpaper.com/static/images/HD-Wallpapers-89_FxDoTt7.jpg');
height: 100%;
margin: 0;
/* Create the parallax scrolling effect */
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.parallax4 {
background-image: url('http://www.uniwallpaper.com/static/images/pexels-photo_vF03DpP.jpeg');
height: 100%;
margin: 0;
/* Create the parallax scrolling effect */
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.parallax5 {
background-image: url('http://www.uniwallpaper.com/static/images/Sunset-Village-Wallpaper_8I7ogbf.jpg');
height: 100%;
margin: 0;
/* Create the parallax scrolling effect */
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.slide1 {
height: 100px;
background-color: blue;
font-size: 36px;
}
nav {
display: none;
mask-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, #ffffff 25%, #ffffff 75%, rgba(255, 255, 255, 0) 100%);
margin: 17px auto;
max-width: 1200px;
position: fixed;
align: middle;
width: 100%;
}
nav ul {
text-align: right;
background: linear-gradient(to right, rgba(255, 0, 0, 0), rgba(255, 255, 255, 30));
box-shadow: 0 0 25px rgba(0, 0, 0, 0.1), inset 0 0 1px rgba(255, 255, 255, 0.6);
}
nav ul li {
display: inline-block;
}
nav ul li a {
padding: 20px;
font-family: "Roboto";
color: rgba(0, 0, 0, 0.5);
text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.4);
font-size: 25px;
text-decoration: none;
display: block;
}
nav ul li a:hover {
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1), inset 0 0 1px rgba(255, 255, 255, 0.6);
background: rgba(255, 255, 255, 0.1);
color: rgba(0, 0, 0, 0.7);
}
body,
html,
.main {
height: 100%;
}
.text1 {
position: relative;
top: 250px;
}
.p1 {
color: white;
font-family: Tahoma, Geneva, sans-serif;
text-align: center;
}
.style1 {}
.style2 {
float: left;
padding-top: 100px;
padding-left: 100px;
}
.style3 {}
.style4 {}
.style5 {}
button {
background: linear-gradient(to right, rgba(255, 0, 0, 0), rgba(255, 255, 255, 0));
border: none;
font-family: "Roboto";
color: rgba(0, 0, 0, 0.5);
text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.4);
text-decoration: none;
display: block;
display: inline-block;
font-size: 26px;
z-index: 1;
float: left;
}
.fixed {
position: fixed;
}
.htmljscss {
float: right;
width: 100px;
height: 100px;
}
.textbackground {
position: absolute;
left: 0px;
top: 150px;
}
.textbackgroundbar {
overflow: hidden;
width: 800px;
height: 50px;
background: linear-gradient(to right, rgba(255, 255, 255, 30), rgba(255, 0, 0, 0), rgba(255, 255, 255, 30));
}
.dropbtn {
display: block;
color: black;
padding: 10px;
font-size: 24px;
border: none;
cursor: pointer;
}
.dropdown {
position: relative;
margin-left: 160px;
display: block;
}
.dropdown-content {
display: none;
position: relative;
background: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.1));
min-width: 800px;
min-height: 700px;
overflow: auto;
z-index: 1;
}
.dropdown-content a {
color: red;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.show {
display: block;
}
.dropdown-content1 {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.dropdown:hover .dropdown-content1 {
display: inline-block;
}
.desc {
padding: 15px;
text-align: center;
}
/* Make sure that padding behaves as expected */
* {
box-sizing: border-box
}
/* Container for skill bars */
.container {
width: 100%;
/* Full width */
background-color: #ddd;
/* Grey background */
}
.skills {
text-align: right;
/* Right-align text */
padding-right: 20px;
/* Add some right padding */
line-height: 30px;
/* Set the line-height to center the text inside the skill bar, and to expand the height of the container */
color: white;
/* White text color */
}
.html {
width: 70%;
background: linear-gradient(to right, #34e893, #0f3443);
}
/* Green */
.css {
width: 70%;
background: linear-gradient(to right, #000046, #1cb5e0);
}
/* Blue */
.js {
width: 45%;
background: linear-gradient(to right, #cb356b, #bd3f32);
}
/* Red */
.php {
width: 30%;
background: linear-gradient(to right, #141e30, #243b55);
}
/* Dark Grey */
.skillbars {
width: 550px;
height: 350px;
float: right;
margin-top: 603px;
}
body {
background-color: #f1f1f1;
}
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<meta charset="UTF-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$(function() {
$("#draggable").draggable();
});
</script>
<script>
$(document).ready(function() {
// Add smooth scrolling to all links
$("a").on('click', function(event) {
// Make sure this.hash has a value before overriding default behavior
if (this.hash !== "") {
// Prevent default anchor click behavior
event.preventDefault();
// Store hash
var hash = this.hash;
// Using jQuery's animate() method to add smooth page scroll
// The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
$('html, body').animate({
scrollTop: $(hash).offset().top
}, 800, function() {
// Add hash (#) to URL when done scrolling (default click behavior)
window.location.hash = hash;
});
} // End if
});
});
$(document).ready(function() {
$(".show").click(function() {
$("nav").fadeToggle();
});
});
$(window).scroll(function() {
if ($(this).scrollTop() > 0) {
$('.hidescroll').fadeOut();
} else {
$('.hidescroll').fadeIn();
}
});
var images = new Array()
images[0] = "../images/html5.png";
images[1] = "../images/javascript.png";
images[2] = "../images/css.png";
setInterval("changeImage()", 900);
var x = 0;
function changeImage() {
document.getElementById("img").src = images[x]
x++;
if (images.length == x) {
x = 0;
}
}
/* When the user clicks on the button,
toggle between hiding and showing the dropdown content */
function myFunction(eleId, event) {
//
// stop event propagation in order to avoid the window.onclick execution
//
event.stopPropagation();
//
// remove show class to previous shown div
//
document.querySelectorAll('.dropdown-content.show').forEach(function(ele, idx) {
ele.classList.remove("show");
});
//
// select by id using the param value
//
document.getElementById(eleId).classList.toggle("show");
}
// Close the dropdown if the user clicks outside of it
window.onclick = function(event) {
//
// if not a button and not a dropdown-content....
//
if (!event.target.matches('.dropbtn') && event.target.closest('.dropdown-content') == null) {
//
// remove show class to previous shown div
//
document.querySelectorAll('.dropdown-content.show').forEach(function(ele, idx) {
ele.classList.remove("show");
});
}
}
</script>
<style>
#draggable {
width: 1px;
float: right;
height: 1px;
padding: 15px;
border-style: none;
background-color: transparent;
}
body,
html,
.main {
margin: 0px;
height: 100%;
}
section {
min-height: 100%;
}
</style>
<body>
<div class="hidescroll">
<nav>
<ul>
<li>
Multiplayer online battle arena
</li>
<li>
League of Legends
</li>
<li>
Defence of the Ancients 2
</li>
<li>
Riot
</li>
<li>
Valve
</li>
</ul>
</nav>
</div>
<div class="parallax">
<div class="fixed"><button class="show"> Show menu</button></div>
<div id="draggable" class="ui-widget-content">
<div class="htmljscss">
<img id="img" width="110px" height="160px" src="../images/html5.png">
</div>
</div>
<div class="skillbars">
<p class="p1">HTML</p>
<div class="container">
<div class="skills html">70%</div>
</div>
<p class="p1">CSS</p>
<div class="container">
<div class="skills css">70%</div>
</div>
<p class="p1">JavaScript</p>
<div class="container">
<div class="skills js">45%</div>
</div>
<p class="p1">PHP</p>
<div class="container">
<div class="skills php">30%</div>
</div>
</div>
<div class="textbackground">
<div class="textbackgroundbar">
<div class="dropdown">
<button onclick="myFunction('myDropdown1', event)" class="dropbtn">Despre mine</button>
<button onclick="myFunction('myDropdown2', event)" class="dropbtn">Dropdown2</button>
<button onclick="myFunction('myDropdown3', event)" class="dropbtn">Dropdown3</button>
</div>
</div>
<div id="myDropdown1" class="dropdown-content">
<p class="p1">
</p>
</div>
<div id="myDropdown2" class="dropdown-content">
a
b
c
</div>
<div id="myDropdown3" class="dropdown-content">
asda
asdasd
adasda
</div>
</div>
</div>
<div class="parallax1">
<div class="main" id="section1">
<section class="style1">
<div class="text1">
<p class="p1">Multiplayer online battle arena (MOBA), cunoscut ca și strategie și acțiune în timp real este un sub gen al jocurilor video de strategie în timp real, în care jucătorul controlează un singur caracter din una dintre cele două echipe. Obiectivul
este distrugerea structurilor inamice cu ajutorul unităților generate periodic care au drum prestabilit. Jucătorii au în general abilități și avantaje variabile care se îmbunătățesc odată cu trecerea timpului și care contribuie la strategia
echipei per ansamblu. MOBA este o fuziune între un joc de acțiune și un joc de strategie în timp real, jucătorii nu pot construii clădiri sau unități.</p>
<p class="p1">Genul a pornit cu Aeon of Strife (AoS) o hartă personalizată pentru StarCraft unde patru jucători fiecare controlând o singură unitate puternică și asistați de unități mai slabe controlate de computer sunt puși împotriva unei echipe mai puternice
controlată de computer.</p>
<p class="p1">Defense of the Ancients (DotA), este o hartă bazată pe Aeon of Strife pentru Warcraft III: Reign of Chaos și The Frozen Throne. DotA a fost primul titlu major al genului și primul MOBA în care au fost organizate turnee sponsorizate.</p>
<p class="p1">DotA a stat la baza jocurilor League of Legends și Heroes of Newerth, urmând o continuare: Dota 2.</p>
<p class="p1">Blizzard Entertainment anunțând deja că lucrează la propriul MOBA - Heroes of the Storm</p>
</div>
</section>
</div>
</div>
<div class="parallax2">
<div class="main" id="section2">
<section class="style2">
<!--azirrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrr-->
<div class="dropdown">
<img src="../images/Azir.jpg" alt="Azir" width="200" height="100">
<div class="dropdown-content1">
<img src="../images/Azir.jpg" alt="Azir" width="829" height="400">
<div class="desc">Azir</div>
</div>
</div>
<!--fizzzzzzzzzzzzzzzzzzzz-->
<div class="dropdown">
<img src="../images/Fizz.jpg" alt="Fizz" width="200" height="100">
<div class="dropdown-content1">
<img src="../images/Fizz.jpg" alt="Fizz" width="829" height="400">
<div class="desc">Fizz</div>
</div>
</div>
<!--zedddddddddddddddddddddddd-->
<div class="dropdown">
<img src="../images/Zed.jpg" alt="Zed" width="200" height="100">
<div class="dropdown-content1">
<img src="../images/Zed.jpg" alt="Zed" width="829" height="400">
<div class="desc">Zed</div>
</div>
</div>
<!--dianaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa-->
<div class="dropdown">
<img src="../images/Diana.jpg" alt="Diana" width="200" height="100">
<div class="dropdown-content1">
<img src="../images/Diana.jpg" alt="Diana" width="829" height="400">
<div class="desc">Diana</div>
</div>
</div>
<!--katarinaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa-->
<div class="dropdown">
<img src="../images/Project Katarina.jpg" alt="Katarina" width="200" height="100">
<div class="dropdown-content1">
<img src="../images/Project Katarina.jpg" alt="Katarina" width="829" height="400">
<div class="desc">Katarina</div>
</div>
</div>
<!--Yasuooooooooooooooooooooooooooooooo-->
<div class="dropdown">
<img src="../images/Yasuo.jpg" alt="Yasuo" width="200" height="100">
<div class="dropdown-content1">
<img src="../images/Yasuo.jpg" alt="Yasuo" width="829" height="400">
<div class="desc">Yasuo</div>
</div>
</div>
<!--Leblancccccccccccccccccccccccccccccccc-->
<div class="dropdown">
<img src="../images/Leblanc.jpg" alt="Leblanc" width="200" height="100">
<div class="dropdown-content1">
<img src="../images/Leblanc.jpg" alt="Leblanc" width="829" height="400">
<div class="desc">Leblanc</div>
</div>
</div>
<!--Taaaaaaaaaaaaaaaaaaalon-->
<div class="dropdown">
<img src="../images/Talon.jpg" alt="Talon" width="200" height="100">
<div class="dropdown-content1">
<img src="../images/Talon.jpg" alt="Talon" width="829" height="400">
<div class="desc">Talon</div>
</div>
</div>
</section>
</div>
</div>
<div class="parallax3">
<div class="main" id="section3">
<section class="style3"></section>
</div>
</div>
<div class="parallax4">
<div class="main" id="section4">
<section class="style4"></section>
</div>
</div>
<div class="parallax5">
<div class="main" id="section5">
<section class="style5"></section>
</div>
</div>
<div class="parallax"></div>
Ok, i put here my entire code and i added some random images so u can make an ideea about it.
Maybe a lot of things are wrong and messed up here, BUT i'm just a beginner, so please take me easy.
Thank you a lot for your time spent reading all this. I know it's a lot.
P.S: Sorry for my bad english, i'm still learning it.
I am having an issue getting tabs to open based on the selection I am choosing. In the snippet you will see 4 boxes. If you click on box 1, I am wanting #marketing1 to open below it and so on.
The method I am using is to get the specific id of the button selection (the 1,2,3,4 box) and then declare a variable to just get the number. Then to add that number to the id of #marketing to show the appropriate section. I am not sure what I am doing wrong. No errors are showing.
Ps - I am also trying to add an .active class to the #marketing-service for when one of the selection boxes is clicked on to show my the active class (it creates a down arrow under the box. Am I implementing the .active wrong to the :before and :after?
//For tabs to stay active
$('.marketing-service').click(function() {
$('.marketing-service.active').removeClass('active');
$(this).toggleClass('active');
//To get the service display box to show
var item_number = $(this).attr('id').replace('marketing-tab', '');
/* $('html, body').animate({
scrollTop: $("#service-display-box").offset().top
}, 1500);*/
$('#marketing'+item_number).show().siblings('.marketing-section-wrap').hide();
});
.marketing-section-wrap, .marketing-section-wrap-main {
width: 100%;
height: auto;
padding: 80px 0;
border-bottom: 1px solid #EBEBEB;
}
.marketing-section-wrap {
display: none;
}
#marketing-services {
width: 95%;
margin: 0 2.5%;
}
.marketing-service {
display: inline-block;
width: 22%;
margin: 0 1%;
height: 400px;
background: #F0F0F0;
position: relative;
cursor: pointer;
}
.marketing-service:first-child {
margin-left: 0;
}
.marketing-service:last-child {
margin-right: 0;
}
.marketing-service:hover {
background: rgba(0, 255, 170, .4);
z-index: 1;
}
/*-- Down Arrow for boxes --*/
.marketing-service:after.active, .marketing-service:before.active {
top: 100%;
left: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
}
.marketing-service:after.active {
border-width: 0px;
margin-left: 0px;
border-color: rgba(136, 183, 213, 0);
border-right-color: #88b7d5;
margin-top: -30px;
}
.marketing-service:before.active {
border-color: #FFF;
border-top-color: #88b7d5;
border-width: 36px;
margin-left: -36px;
margin-top: 0;
}
.marketing-service-wrap {
padding: 10%;
width: 80%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="marketing-services">
<div class="marketing-service" id="marketing-tab1">
<div class="marketing-service-wrap total-center">
<h2 class="marketing-service-title">1</h2>
</div>
</div>
<div class="marketing-service" id="marketing-tab2">
<div class="marketing-service-wrap total-center">
<h2 class="marketing-service-title">2</h2>
</div>
</div>
<div class="marketing-service" id="marketing-tab3">
<div class="marketing-service-wrap total-center">
<h2 class="marketing-service-title">3</h2>
</div>
</div>
<div class="marketing-service" id="marketing-tab4">
<div class="marketing-service-wrap total-center">
<h2 class="marketing-service-title">4</h2>
</div>
</div>
</div>
<div id="marketing1">
<div class="marketing-section-wrap">
1
</div>
</div>
<div id="marketing2">
<div class="marketing-section-wrap">
2
</div>
</div>
Quite simple just try $('#marketing'+item_number).children().show() because marketing-section-wrap is display:none;
first run this to hide all marketing-section-wrap
$('.marketing-section-wrap').hide();
then this will show only the one which corresponds to this click.
$('#marketing'+item_number).children().show();
I need to use RGBA background above this grid. I used some of the jQuery to interect with div area. But I don't know how to put this background-color in image while I'm using jQuery. Is there a way I can do this using jQuery ? or any other methods ?
// Grid function
$(function() {
$(".single_grid").hover(function() {
var panelId = $(this).attr("data-panelId");
$("#" + panelId).css({}).toggle();
})
$(".single_grid").mouseover(function() {
var imageId = $(this).attr("data-imageId");
$("#" + imageId).css({
opacity: "0.3"
})
})
$(".single_grid").mouseleave(function() {
var imageId = $(this).attr("data-imageId");
$("#" + imageId).css({
opacity: "1"
})
})
})
.grid_panel {
width: 100%;
height: auto;
}
#sub_grid_panel {
height: 760px;
margin: 0 auto;
width: 1125px;
}
#sub_grid_panel li {
float: left;
}
.single_grid {
width: 280px;
height: 200px;
overflow: hidden;
position: relative;
top: 0px;
left: 0px;
}
.image_hover_preview h3 {
text-align: center;
display: block;
margin-bottom: 5px;
font-weight: normal;
font-family: 'RalewayLight';
color: #FF8500;
}
.image_hover_preview {
position: absolute;
top: 65px;
width: 100%;
display: none;
}
div.image_hover_preview a i {
color: #333;
font-size: 20px;
padding: 5px 10px;
background: #FF8500;
color: #FFFFFF;
}
div.image_hover_preview {
text-align: center;
}
<li class="single_grid" data-panelId="panel1" data-imageId="image1">
<div class="grid_column_bar">
<img src="img/grid/grid1.jpg" alt="" id="image1">
<div class="image_hover_preview" id="panel1">
<h3>Lorem ipsum dolor</h3>
<i class="fa fa-search-plus"></i>
<i class="fa fa-link"></i>
</div>
</div>
</li>
<li class="single_grid" data-panelId="panel2" data-imageId="image2">
<div class="grid_column_bar">
<img src="img/grid/grid2.jpg" alt="" id="image2">
<div class="image_hover_preview" id="panel2">
<h3>Lorem ipsum dolor</h3>
<i class="fa fa-search-plus"></i>
<i class="fa fa-link"></i>
</div>
</div>
</li>
Personally, I'm a fan of this little box-shadow: inset trick.
Just add a background like you normally would and on top of that,
add a box-shadow property like so :
.element {
background-image: url(myBgImage.jpg);
box-shadow: inset 0px 0px 0px 1000px rgba(51,51,51,0.3);
}
Note: the spread-radius of 1000px is arbitrarily chosen. Just make sure it exceeds the width/height of your element.
Box Shadow Generator
I'm not entirely sure what you wanted since your code snippet didn't work at all.
This changes the background color:
$(element).css({
backgroundColor:"rgba(50,50,50,.5)"
});
To put the color on top of the background image, you can use gradients:
$(element).css({
backgroundImage:"linear-gradient(rgba(50,50,50,.5),rgba(50,50,50,.5)),url(background.jpg)"
});
If I wanted to make a horizontal line, I would do this:
<style>
#line{
width:100px;
height:1px;
background-color:#000;
}
</style>
<body>
<div id="line"></div>
If I wanted to make a vertical line, I would do this:
#line{
width:1px;
height:100px;
background-color:#000;
}
</style>
<body>
<div id="line"></div>
A curved line is trickier, but possible using border-radius and wrapping the element:
<style>
.curve{
width:100px;
height:500px;
border:1px #000 solid;
border-radius:100%;
}
#wrapper{
overflow:hidden;
width:40px;
height:200px;
}
</style>
<body>
<div id="wrapper">
<div class="curve"></div>
</div>
</body>
But I cannot even fathom how I could generate squiggly lines! Is this even remotely possible using only css (and javascript since it does seem that it will be necessary to be able to more easily generate them).
note:
As expected, given your answers there is no way to do this in sole css...javascript and jquery are 100 percent okay for your answer...NO IMAGES CAN BE USED
This question is fairly old, but I found a way to do with without Javascript, repetitive CSS or images.
With background-size you can repeat a pattern, which can be created with pure CSS using linear-gradient or radial-gradient.
I put a bunch of examples here: http://jsbin.com/hotugu/edit?html,css,output
The basic gist is:
.holder {
/* Clip edges, as some of the lines don't terminate nicely. */
overflow: hidden;
position: relative;
width: 200px;
height: 50px;
}
.ellipse {
position: absolute;
background: radial-gradient(ellipse, transparent, transparent 7px, black 7px, black 10px, transparent 11px);
background-size: 36px 40px;
width: 200px;
height: 20px;
}
.ellipse2 {
top: 20px;
left: 18px;
background-position: 0px -20px;
}
<div class="holder">
<div class="ellipse"></div>
<div class="ellipse ellipse2"></div>
</div>
You can produce some convincing squiggly lines with some modifications:
.holder {
position: relative;
width: 200px;
height: 50px;
top: 25px;
}
.tinyLine {
position: absolute;
/* Cuts off the bottom half of the pattern */
height: 20px;
/* For better cross browser consistency, make it larger with width. */
width: 1000%;
/* And then scale it back down with scale, recentering with translateX. */
transform: translateX(-45%) scale(0.1);
}
.tinyLine1 {
background: linear-gradient(45deg, transparent, transparent 49%, red 49%, transparent 51%);
}
.tinyLine2 {
background: linear-gradient(-45deg, transparent, transparent 49%, red 49%, transparent 51%);
}
.tinyLine {
/* Must be after background definition. */
background-size: 40px 40px;
}
<div class="holder">
<div class="tinyLine tinyLine1"></div>
<div class="tinyLine tinyLine2"></div>
</div>
The browser support is okay (http://caniuse.com/#feat=css-gradients), IE 10 will probably work, however things break down at small scales in different browsers. If you want it to work on really small scales consistently you may want to make the line on a larger scale and then scale it down with transform: scale(x);.
It should also be very fast, linear-gradients are rendered on the GPU in chrome.
EDIT: Given the requirement of no images/data uri.
You can also cram a bunch of border-radius elements together, alternating with top/bottom or left/right edges disabled. I've generalized this into a function that appends them to an element.
Javascript, where squigglecount is the number of "squiggles". You could generalize that to an actual width if you so desired.
http://jsfiddle.net/V7QEJ/1/
function makeLine(id, squiggleCount) {
var curve;
var lineEl = $(id);
for (var i = 0; i < squiggleCount; i++) {
curve = document.createElement('div');
curve.className = 'curve-1';
lineEl.append(curve);
curve = document.createElement('div');
curve.className = 'curve-2';
lineEl.append(curve);
}
}
$(document).ready(function(){
makeLine('#line', 16);
});
.curve-1,
.curve-2 {
display: inline-block;
border: solid 1px #f00;
border-radius: 50px;
height: 20px;
width: 20px;
}
.curve-1 {
border-bottom: none;
border-left: none;
border-right: none;
}
.curve-2 {
border-top: none;
border-left: none;
border-right: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="line">
</div>
Old (with images):
There's already a bunch of answers, but here's an easy way to do a vertical squiggly line, similar to Lawson's answer.
Basically, you use background-image and a data-uri of a squiggly line to do it. I probably wouldn't use this for anything but it's an interesting thought exercise. There are a bunch of data uri generators that you can use online to change your own images.
http://jsfiddle.net/zadP7/
.aux{
display: inline-block;
vertical-align: top;
}
.line{
display: inline-block;
height: 400px;
width: 10px;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAoCAYAAADHVmuAAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH3QYYFSs0NbBHxgAAAB1pVFh0Q29tbWVudAAAAAAAQ3JlYXRlZCB3aXRoIEdJTVBkLmUHAAAGc0lEQVQ4EQFoBpf5AQAAAP8AAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAIAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAIAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACAAAAAAAAAAAAAAAAAAAA/wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAIAAAABAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAgAAAAAAAAAAAAAAAAAAAAAAAAD/AAAAAAAAAAAAAAAAAAAAAAAAAAABAAAAAAAAAAAAAAD/AAAAAAAAAAAAAAAAAAAAAQAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAAAAAAAA/wAAAAAAAAAAAAAAAAAAAAEAAAAAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA/wAAAAAAAAAAAAAAAAAAAAEBAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD/AAAAAAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD/AAAAAAAAAAAAAAAAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD/AAAAAAAAAAACAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAIAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAIAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAIAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAIAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAIAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAP8AAAAAAAAAAAAAAAABAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD/AAAAAAAAAAAAAAAAAAAAAQEAAAAAAAAAAAAAAAAAAAAAAAAA/wAAAAAAAAAAAAAAAAAAAAEAAAAAAgAAAAAAAAAAAAAAAAAAAP8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABAAAAAAAAAAAAAAD/AAAAAAAAAAAAAAAAAAAAAQAAAAAAAAAAAAAAAAEAAAAAAAAA/wAAAAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAAAAAQAAAP8AAAAAAAAAAAAAAAAAAAABAAAAAAAAAAAAAAAAAAAAAAAAAAACAAAAAAAAAAAAAAAAAAAAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAIAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACelxA/rjIgrgAAAABJRU5ErkJggg==);
}
<div class="aux">Stuff</div>
<div class="line"></div>
<div class="aux">More Stuff</div>
Pure CSS solution:
We can use the sin wave character '∿' character and then
Set a negative value for letter-spacing
FIDDLE
Just for fun we can use different characters to get other squiggles:
FIDDLE #2
div {
font-size: 50px;
font-family: verdana;
}
.tilde {
letter-spacing: -19px;
}
.ohm {
letter-spacing: -6px;
}
.ac {
letter-spacing: -25px;
}
.acd {
letter-spacing: -11px;
}
.curlyv {
letter-spacing: -12px;
}
.frown {
letter-spacing: -13px;
}
<div class="acd">∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿</div>
<div class="tilde">˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜</div>
<div class="curlyv">⋎⋎⋎⋎⋎⋎⋎⋎⋎⋎⋎⋎⋎⋎⋎⋎</div>
<div class="frown">⌢⌢⌢⌢⌢⌢⌢⌢⌢⌢⌢⌢⌢⌢⌢⌢⌢</div>
<div class="ac">∾∾∾∾∾∾∾∾∾∾∾∾∾∾∾∾∾∾∾∾∾</div>
<div class="ohm">ΩΩΩΩΩΩΩΩΩΩ</div>
If you want the underline of some text to be a squiggly line, you can use the following css:
span {
text-decoration-line: underline;
text-decoration-style: wavy;
text-decoration-color: red;
}
<span>Example text here</span>
Source: https://developer.mozilla.org/en/docs/Web/CSS/text-decoration-line#example
if you are not looking for something really neat, but just for the fun of it, play with multiple box-shadow:
http://codepen.io/gcyrillus/pen/mfGdp or http://codepen.io/gcyrillus/pen/xhqFu
.curve{
margin:3em 0;
width:100px;
height:150px;
border-radius:50%;
box-shadow:
0px 2px 1px -1px,
400px 0px 0px 0px white,
400px 2px 1px -1px ,
300px 0px 0px 0px white,
300px -2px 1px -1px,
600px 0px 0px 0px white,
600px 2px 1px -1px ,
500px 0px 0px 0px white,
500px -2px 1px -1px,
800px 0px 0px 0px white,
800px 2px 1px -1px ,
700px 0px 0px 0px white,
700px -2px 1px -1px,
1000px 0px 0px 0px white,
1000px 2px 1px -1px ,
900px 0px 0px 0px white,
900px -2px 1px -1px,
1200px 0px 0px 0px white,
1200px 2px 1px -1px ,
1100px 0px 0px 0px white,
1100px -2px 1px -1px,
1400px 0px 0px 0px white,
1400px 2px 1px -1px ,
1300px 0px 0px 0px white,
1300px -2px 1px -1px,
1600px 0px 0px 0px white,
1600px 2px 1px -1px ,
1500px 0px 0px 0px white,
1500px -2px 1px -1px;
position:relative;
}
.curve:before,.curve:after {
content:'';
position:absolute;
height:100%;
width:100%;
border-radius:100%;
box-shadow:inherit;
}
.curve:before {
left:100%;
transform:rotate(180deg);
}
.curve:after {
left:200%;
}
﹏﹏﹏﹏﹏﹏﹏﹏﹏﹏﹏﹏﹏﹏﹏﹏﹏﹏﹏﹏﹏﹏﹏﹏﹏﹏﹏﹏﹏﹏﹏﹏﹏﹏﹏﹏
& #65103 ; (wavy low line)
I hope this is not too much off topic - here is how to use those squiggly lines to underline some text (should be a common use case.)
method 1 (snatched from Wulf answering a related question)
<span style="border-bottom: 1px dotted #ff0000;padding:1px">
<span style="border-bottom: 1px dotted #ff0000;">
foobar
</span>
</span>
(not really a squiggly line but a collection of dots, but looks OK and is beautifully simple.)
method 2 (inspired by DanieldD)
using & #65103 ; (wavy low line) unicode character and absolute / relative positioning to put that character underneath some text. Here is a fiddle
here is "the meat" of the code for the positioning
function performUnderWavyLowLineazation(contentElt){
var wavyFontSize = 40;
var width = contentElt.width();
contentElt.addClass("underWavyLowLined");
replaceSpaceByNonBreakingSpace(contentElt);
var sp = "<span/>";
var wrapper = contentElt.wrap(sp).parent();
wrapper.addClass("wavyParent");
var underlining = jQuery(sp, {"class" : "wavyLowLine"}).prependTo(wrapper);
var ghost;
var invisibleGhostThatTakesUpTheSpaceThatUnderWavyLowLinedElementShouldTakeButDoesntDueToBeingAbsolute
= ghost = jQuery(sp, {"class": "invisibleUnderWavyLowLined"}).appendTo(wrapper);
ghost.html(contentElt.html());
ghost.find("*").removeAttr("id");
replaceSpaceByNonBreakingSpace(ghost);
var numWavyChars = Math.floor(0.1 + width/wavyFontSize);
innerUnderLine = jQuery(sp, {"class": "innerWaveLine"}).appendTo(underlining);
innerUnderLine.html("﹏".repeat(numWavyChars));
var lineLength = wavyFontSize * numWavyChars;
var defect = width - lineLength;
innerUnderLine.css("left", defect/2);
var wavyGroup = jQuery(sp, {"class" : "wavyGroup"}).prependTo(wrapper);
underlining.appendTo(wavyGroup);
contentElt.appendTo(wavyGroup);
}
Thank #yeerk for such a wonderful solution!
But I would like to suggest some improvements to his first variants — to those of waves what seem to be more triangular. I would suggest to use :before and :after pseudo-elements instead of hard-coded enclosed divs.
It may look like this (html):
<div class="triangly-line"></div>
— where triangly-line is a target decorated element (not "waved" but "triangled").
Corresponding styles (using LESS notation) will look like this:
#line-width: 300px;
#triangled-size: 6px;
#triangly-color: red;
#double-triangled-size: (#triangled-size * 2 - 1px);
.linear-gradient (#gradient) {
background: -webkit-linear-gradient(#gradient);
background: -o-linear-gradient(#gradient);
background: linear-gradient(#gradient);
}
.triangly-gradient (#sign, #color) {
.linear-gradient(~"#{sign}45deg, transparent, transparent 49%, #{color} 49%, transparent 51%");
}
.triangly-line {
overflow: hidden;
position: relative;
height: #triangled-size;
&:before {
.triangly-gradient("", #triangly-color);
}
&:after {
.triangly-gradient("-", #triangly-color);
}
&:before,
&:after {
content: "";
display: block;
position: absolute;
width: #line-width;
height: #triangled-size;
background-size: #double-triangled-size #double-triangled-size !important;
}
}
Resulted CSS (using specified above parameters):
.triangly-line {
overflow: hidden;
position: relative;
height: 6px;
}
.triangly-line:before {
background: -webkit-linear-gradient(45deg, transparent, transparent 49%, red 49%, transparent 51%);
background: -o-linear-gradient(45deg, transparent, transparent 49%, red 49%, transparent 51%);
background: linear-gradient(45deg, transparent, transparent 49%, red 49%, transparent 51%);
}
.triangly-line:after {
background: -webkit-linear-gradient(-45deg, transparent, transparent 49%, red 49%, transparent 51%);
background: -o-linear-gradient(-45deg, transparent, transparent 49%, red 49%, transparent 51%);
background: linear-gradient(-45deg, transparent, transparent 49%, red 49%, transparent 51%);
}
.triangly-line:before,
.triangly-line:after {
content: "";
display: block;
position: absolute;
width: 300px;
height: 6px;
background-size: 11px 11px !important;
}
Before there was HTML5 and Canvas, there was JavaScript VectorGraphics. You may want to give it a try if you want to draw Circles, Ellipses etc. etc. in pure HTML.
Instead of using the border, use a tiled background image.
I do not think there is a solution that get's away without using a graphics file and that also works in all browsers.
If you are brave you can try this:http://www.html5canvastutorials.com/tutorials/html5-canvas-arcs/
It allows to draw on the canvas in HTML5, but it would not work on older browsers.
if you can add a lot of html you can use this:
http://jsfiddle.net/QsM4J/
HTML:
<body>
<p>
before
</p>
<div id="sqig">
<div class="topsqig"><div></div></div>
<div class="bottomsqig"><div></div></div>
<div class="topsqig"><div></div></div>
<div class="bottomsqig"><div></div></div>
<div class="topsqig"><div></div></div>
<div class="bottomsqig"><div></div></div>
<div class="topsqig"><div></div></div>
<div class="bottomsqig"><div></div></div>
<div class="topsqig"><div></div></div>
<div class="bottomsqig"><div></div></div>
<div class="topsqig"><div></div></div>
<div class="bottomsqig"><div></div></div>
<div class="topsqig"><div></div></div>
<div class="bottomsqig"><div></div></div>
<div class="topsqig"><div></div></div>
<div class="bottomsqig"><div></div></div>
<div class="topsqig"><div></div></div>
<div class="bottomsqig"><div></div></div>
<div class="topsqig"><div></div></div>
<div class="bottomsqig"><div></div></div>
<div class="topsqig"><div></div></div>
<div class="bottomsqig"><div></div></div>
<div class="topsqig"><div></div></div>
<div class="bottomsqig"><div></div></div>
<div class="topsqig"><div></div></div>
<div class="bottomsqig"><div></div></div>
<div class="topsqig"><div></div></div>
<div class="bottomsqig"><div></div></div>
<div class="topsqig"><div></div></div>
<div class="bottomsqig"><div></div></div>
<div class="topsqig"><div></div></div>
<div class="bottomsqig"><div></div></div>
<div class="topsqig"><div></div></div>
<div class="bottomsqig"><div></div></div>
<div class="topsqig"><div></div></div>
<div class="bottomsqig"><div></div></div>
<div class="topsqig"><div></div></div>
<div class="bottomsqig"><div></div></div>
<div class="topsqig"><div></div></div>
<div class="bottomsqig"><div></div></div>
</div>
<p>
after
</p>
</body>
CSS:
#sqig{
position:relative;
width:400px;
height:6px;
}
#sqig div{
position:relative;
width:6px;
height:6px;
display: inline-block;
margin:0 0 0 -4px;
padding:0;
}
#sqig .topsqig div{
border-radius: 3px;
top:1px;
border-top: 1px solid #000;
}
#sqig .bottomsqig div{
border-radius: 3px;
top:-1px;
border-bottom: 1px solid #000;
}
Here is a SASS wave line generator based on the answer from #yeerk. If you want triangles, use the generator above by #lilliputten.
$waveHeight: 40px;
$waveLength: 70px;
$waveRadius: 13px; // adjust depending on length
$waveThickness: 8px;
#mixin waveSide() {
position: absolute;
background: radial-gradient(ellipse, transparent, transparent $waveRadius, black $waveRadius, black #{$waveRadius + $waveThickness}, transparent #{$waveRadius + $waveThickness});
background-size: #{$waveLength} #{$waveHeight * 2};
height: $waveHeight;
}
.wavy {
width: 400px; // give the wave element a length here
#include waveSide;
&::before {
$waveOffset: $waveLength / 2;
#include waveSide;
content: '';
width: calc(100% - #{$waveOffset});
top: $waveHeight;
left: $waveOffset;
background-position: 0px -#{$waveHeight};
}
}
I found a slighty nicer way to achieve trangle squiggly lines in CSS without halving heights or applying tricks that don't work well across browsers.
I tried #yeerk's solution but it only works well in Chrome. The lines had artifacts on Safari and Firefox.
Firefox
Safari
This solution is a variation of #liliputen's solution, however it improves on ease of flexibility.
You can change the line's size easily from the background-size property.
.squiggly {
position: relative;
height: 10px;
width: 100%;
}
.squiggly::after,
.squiggly::before {
height: inherit;
width: inherit;
background-size: 12px 100%; /* Change this to adjust the size of the squiggly line. */
content: "";
position: absolute;
}
.squiggly::before {
top: -2px;
background-image: linear-gradient(45deg, red 35%, transparent 0),
linear-gradient(-45deg, red 35%, transparent 0);
}
.squiggly::after {
top: 0px;
background-image: linear-gradient(45deg, white 35%, transparent 0),
linear-gradient(-45deg, white 35%, transparent 0);
}
<div class="squiggly"></div>
You can also find it here on JS Fiddle.
If you are using Javascript, this can be easily achieved using a sine wave - this is how programming languages have achieved controllable squiggly lines for decades! You should be able to find plenty of examples out there, but essentially you just do loop with an incrementing x value and apply the sine function sin(). This used to be cool for doing screen-savers in the 90s and animating them, etc.