Related
I would like copy a custom select box from here --> https://codepen.io/microfront/pen/NXGrGQ into my website,
but it's not work when I paste the whole code.
I can't figure out how. I tried to copy all the html, css and java but doesn't work, then I even tried to convert scss to css still not working
I have this result from any navigator screenshot
body {
margin: 0;
font-family: 'Playfair Display', serif;
padding: 0 15px;
}
h1 {
font-size: 50px;
line-height: 54px;
text-align: center;
margin: 100px auto 60px;
max-width: 600px;
}
/*Chosen style*/
.chosen-wrapper {
margin: 0 auto 25px;
max-width: 400px;
position: relative;
}
.chosen-wrapper:after {
pointer-events: none;
content: "";
position: absolute;
top: 32px;
right: 20px;
width: 0;
height: 0;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-top: 8px solid rgba(0, 0, 0, 0.5);
transition: all 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
z-index: 9;
}
.chosen-wrapper.is-active:after {
border-top: 8px solid black;
-ms-transform: rotate(180deg);
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
.chosen-wrapper .chosen-container .chosen-single {
border-radius: 0;
height: 70px;
border: solid 2px #d9d9d9;
background: #fff;
font-size: 22px;
color: rgba(0, 0, 0, 0.5);
padding: 0 30px;
line-height: 66px;
transition: all 0.3s ease;
box-shadow: none;
background: #fff;
}
.chosen-wrapper .chosen-container .chosen-single b {
display: none !important;
}
.chosen-wrapper .chosen-container .chosen-single span {
letter-spacing: 0;
padding: 0;
line-height: inherit;
}
.chosen-wrapper .chosen-container.chosen-with-drop .chosen-single {
border-width: 2px 2px 1px;
border-color: #000 #000 #d9d9d9;
color: #000;
background-image: none;
}
.chosen-wrapper .chosen-container.chosen-with-drop .chosen-drop {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.chosen-wrapper .chosen-container.chosen-container-single-nosearch .chosen-search {
display: none;
}
.chosen-wrapper .chosen-container .chosen-drop {
letter-spacing: 0;
border-radius: 0;
box-shadow: none;
border-width: 0 2px 2px;
border-color: #000;
margin-top: 0;
-webkit-transition: all 0.3s cubic-bezier(0.55, 0.085, 0.68, 0.53);
-o-transition: all 0.3s cubic-bezier(0.55, 0.085, 0.68, 0.53);
transition: all 0.3s cubic-bezier(0.55, 0.085, 0.68, 0.53);
opacity: 0;
}
.chosen-wrapper .chosen-container .chosen-results {
font-size: 22px;
color: #000;
max-height: 245px;
margin: 0;
padding: 0;
}
.chosen-wrapper .chosen-container .chosen-results li {
padding: 16px 30px 18px;
margin: 0;
border-bottom: 1px solid #e5e5e5;
-webkit-transition: all 0.4s cubic-bezier(0.55, 0.085, 0.68, 0.53);
-o-transition: all 0.4s cubic-bezier(0.55, 0.085, 0.68, 0.53);
transition: all 0.4s cubic-bezier(0.55, 0.085, 0.68, 0.53);
line-height: 20px;
}
.chosen-wrapper .chosen-container .chosen-results li.highlighted {
background-color: #eeeeee !important;
color: #000;
background-image: none;
}
.chosen-wrapper--style2:after {
right: 0;
}
.chosen-wrapper--style2:before {
content: '';
width: 0;
border-top: 2px solid #000;
position: absolute;
left: 0;
bottom: 0;
z-index: 1;
transition: all 0.2s cubic-bezier(0.06, 1, 0.89, 0.85);
}
.chosen-wrapper--style2.is-active:before {
width: 100%;
}
.chosen-wrapper--style2 .chosen-container .chosen-single {
border-width: 0 0 2px;
padding: 0;
}
.chosen-wrapper--style2 .chosen-container.chosen-with-drop .chosen-single {
border-width: 0 0 2px;
}
.chosen-wrapper--style2 .chosen-container.chosen-with-drop .chosen-drop {
opacity: 1;
visibility: visible;
transform: translateY(5px);
}
.chosen-wrapper--style2 .chosen-container .chosen-drop {
border-color: #d9d9d9;
border-top: 2px solid #d9d9d9;
}
.chosen-wrapper--style2 .chosen-container .chosen-results li {
padding: 16px 15px 18px;
}
/*ScrollBox style*/
.nicescroll-rails {
border-left: 1px solid #d9d9d9;
transform: translate(-2px);
top: 0 !important;
}
.nicescroll-rails .nicescroll-cursors {
width: 6px !important;
margin-right: 2px;
}
.link {
position: absolute;
left: 0;
bottom: 0;
padding: 20px;
}
.link a {
display: flex;
align-items: center;
text-decoration: none;
color: #000;
}
.link .fa {
font-size: 28px;
margin-right: 8px;
color: #000;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/malihu-custom-scrollbar-plugin/3.1.5/jquery.mCustomScrollbar.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.2/chosen.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1>Responsive custom select box</h1>
<!--Style 2-->
<div class="chosen-wrapper chosen-wrapper--style2">
<select class="chosen-select" data-placeholder="Lorem ipsum dolor sit amet">
<option></option>
<option>Consectetur adipiscing</option>
<option>Sed do eiusmod tempor</option>
</select>
</div>
Hi I have a button element that slide to the picture and I want the picture to be blurred when the button appeared however the button also blurring upon hovering I want only the image to be have that effect please help me! How can I do that? Excuse my english please. I am also a beginner. Thank you in advance.
.Aljon { /* This is an image */
width: 484px;
height: 612px;
position: absolute;
left: 65%;
bottom: 0;
background-size: contain;
background-repeat: no-repeat;
margin: 0;
padding: 0;
background-image: url(../Resources/Aljon.png);
animation: aljon-load 300ms ease 200ms;
transform: translateY(150%);
animation-fill-mode: forwards;
transition: 1s ease;
z-index: 2;
}
#keyframes aljon-load {
0% {
transform: translateY(150%);
}
100% {
transform: translateX(0);
}
}
#myBtn {
background-color: #ffffff;
border: none;
color: rgb(2, 2, 2);
padding: 10px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
font-family: Arial Rounded MT;
border-top-right-radius: 10px;
border-bottom-left-radius: 10px;
left: 500px;
top: 400px;
position: relative;
transition: 0.3s ease-in-out;
z-index: 3;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.Aljon:hover #myBtn {
left: 200px;
transition: 0.3s ease-in-out;
}
.Aljon:hover {
filter: blur(8px);
}
.container:hover .Aljon {
opacity: 1;
transition: 0.3s ease-in-out;
cursor: pointer;
}
<div class="container">
<div class="Aljon">
<div class="overlay">
<button id="myBtn" class="button">HIRE ME</button>
</div>
</div>
</div>
You have to put blur 0px on other classes:
.Aljon { /* This is an image */
width: 484px;
height: 612px;
position: absolute;
left: 65%;
bottom: 0;
background-size: contain;
background-repeat: no-repeat;
margin: 0;
padding: 0;
background-image: url(../Resources/Aljon.png);
animation: aljon-load 300ms ease 200ms;
transform: translateY(150%);
animation-fill-mode: forwards;
transition: 1s ease;
z-index: 2;
}
#keyframes aljon-load {
0% {
transform: translateY(150%);
}
100% {
transform: translateX(0);
}
}
#myBtn {
background-color: #ffffff;
border: none;
color: rgb(2, 2, 2);
padding: 10px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
font-family: Arial Rounded MT;
border-top-right-radius: 10px;
border-bottom-left-radius: 10px;
left: 500px;
top: 400px;
position: relative;
transition: 0.3s ease-in-out;
z-index: 3;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.Aljon:hover #myBtn {
left: 200px;
transition: 0.3s ease-in-out;
filter: blur(0px);
}
.Aljon:hover {
filter: blur(8px);
}
.container:hover .Aljon {
opacity: 1;
transition: 0.3s ease-in-out;
cursor: pointer;
filter: blur(0px);
}
<div class="container">
<div class="Aljon">
<div class="overlay">
<button id="myBtn" class="button">HIRE ME</button>
</div>
</div>
</div>
Thank you everyone. Here's how I fixed my code I let my button out inside the div of the image and manually add or style them on css.
.Aljon {
width: 484px;
height: 612px;
position: absolute;
left: 65%;
bottom: 0;
background-size: contain;
background-repeat: no-repeat;
margin: 0;
padding: 0;
background-image: url(../Resources/Aljon.png);
animation: aljon-load 300ms ease 200ms;
transform: translateY(150%);
animation-fill-mode: forwards;
transition: 1s ease;
z-index: 4;
}
#keyframes aljon-load {
0% {
transform: translateY(150%);
}
100% {
transform: translateX(0);
}
}
#myBtn {
background-color: #ffffff;
border: none;
color: rgb(2, 2, 2);
padding: 10px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
cursor: pointer;
font-family: Arial Rounded MT;
border-top-right-radius: 10px;
border-bottom-left-radius: 10px;
left: 1500px;
top: 400px;
position: relative;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
z-index: 4;
transition: 0.3s ease;
}
.Aljon:hover ~ #myBtn {
left: 1010px;
transition: 0.3s ease;
}
#myBtn:hover {
left: 1010px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.container:hover .Aljon {
filter: blur(2px);
}
<div class="container">
<div class="Aljon">
</div>
<button id="myBtn" class="button">HIRE ME</button>
</div>
*,
*::after,
*::before {
box-sizing: border-box;
}
button {
width: 250px;
height: 70px;
margin: auto;
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
font-size: 22px;
border: 3px solid #28F2B3;
color: #28F2B3;
line-height: 64px;
background: none;
white-space: nowrap;
overflow: hidden;
box-shadow: 0 0 5px #222;
border-radius: 70px;
-webkit-animation: over 6s infinite;
animation: over 6s infinite;
}
button:before {
content: '';
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 0;
background: #28F2B3;
-webkit-animation: load 6s infinite;
animation: load 6s infinite;
}
button:after {
content: '';
position: absolute;
width: 15px;
height: 15px;
border-bottom: 3px solid;
border-right: 3px solid;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
box-shadow: 3px 3px #333, 6px 6px #28F2B3;
right: 45px;
top: 18px;
-webkit-animation: dwd 6s infinite;
animation: dwd 6s infinite;
}
#-webkit-keyframes over {
0%, 20% {
line-height: 64px;
width: 250px;
}
25%,
100% {
line-height: 150px;
border-color: #28F2B3;
}
30%,
100% {
width: 70px;
border-color: #444;
}
}
#keyframes over {
0%, 20% {
line-height: 64px;
width: 250px;
}
25%,
100% {
line-height: 150px;
border-color: #28F2B3;
}
30%,
100% {
width: 70px;
border-color: #444;
}
}
#-webkit-keyframes load {
0%, 40% {
height: 0;
}
90%,
100% {
height: 100%;
}
}
#keyframes load {
0%, 40% {
height: 0;
}
90%,
100% {
height: 100%;
}
}
#-webkit-keyframes dwd {
0%, 20% {
right: 45px;
top: 18px;
}
30%,
100% {
right: 25px;
}
30%,
40%,
50%,
60%,
70%,
80% {
top: 14px;
}
35%,
45%,
55%,
65%,
75%,
85% {
top: 22px;
}
54% {
color: #28F2B3;
box-shadow: 3px 3px #333, 6px 6px #28F2B3;
}
55%,
85% {
color: #333;
box-shadow: 3px 3px #28F2B3, 6px 6px #333;
border-width: 3px;
height: 15px;
}
90%,
100% {
box-shadow: 1px 1px #333;
border-width: 5px;
height: 25px;
color: #fff;
}
}
#keyframes dwd {
0%, 20% {
right: 45px;
top: 18px;
}
30%,
100% {
right: 25px;
}
30%,
40%,
50%,
60%,
70%,
80% {
top: 14px;
}
35%,
45%,
55%,
65%,
75%,
85% {
top: 22px;
}
54% {
color: #28F2B3;
box-shadow: 3px 3px #333, 6px 6px #28F2B3;
}
55%,
85% {
color: #333;
box-shadow: 3px 3px #28F2B3, 6px 6px #333;
border-width: 3px;
height: 15px;
}
90%,
100% {
box-shadow: 1px 1px #333;
border-width: 5px;
height: 25px;
color: #fff;
}
}
<button>Download</button>
Well I wanted to use this animated button for my personal project but the problem i am having is that my search button also has the same class as the download button so when i save and open the page the download button seems to overlap the search icon. I searched google but didn't find a way to change a button's class using css and i don't know jquery a lot. So if anybody here can help me fix that problem it'll be highly appreciated. Thanks in advance! :)
I'm sorry, but from the code above, <button>Download</button> doesn't have a class. Assuming you have access to the HTML, you can change it to something like <button class="downloadBtn"> and then target it specifically with the css you have by changing the attributes from button to button.downloadBtn. Then your other <button> tags should not be targeted.
So, a little background: in HTML and CSS, we can use things called id and class attributes to target specific elements. When you have the css as you showed above, it thinks you want to target every button that is an HTML tag <button>. Out of the box, the css has no way of knowing you want to only target a specific button.
What we do in cases like this is utilize the attributes I mentioned. What you can do is make your download button tag look like this:
HTML
<button id="downloadBtn">Download</button>
Then, alter your css to look like this:
CSS
*,
*::after,
*::before {
box-sizing: border-box;
}
button#downloadBtn {
width: 250px;
height: 70px;
margin: auto;
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
font-size: 22px;
border: 3px solid #28F2B3;
color: #28F2B3;
line-height: 64px;
background: none;
white-space: nowrap;
overflow: hidden;
box-shadow: 0 0 5px #222;
border-radius: 70px;
-webkit-animation: over 6s infinite;
animation: over 6s infinite;
}
button#downloadBtn:before {
content: '';
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 0;
background: #28F2B3;
-webkit-animation: load 6s infinite;
animation: load 6s infinite;
}
button#downloadBtn:after {
content: '';
position: absolute;
width: 15px;
height: 15px;
border-bottom: 3px solid;
border-right: 3px solid;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
box-shadow: 3px 3px #333, 6px 6px #28F2B3;
right: 45px;
top: 18px;
-webkit-animation: dwd 6s infinite;
animation: dwd 6s infinite;
}
#-webkit-keyframes over {
0%, 20% {
line-height: 64px;
width: 250px;
}
25%,
100% {
line-height: 150px;
border-color: #28F2B3;
}
30%,
100% {
width: 70px;
border-color: #444;
}
}
#keyframes over {
0%, 20% {
line-height: 64px;
width: 250px;
}
25%,
100% {
line-height: 150px;
border-color: #28F2B3;
}
30%,
100% {
width: 70px;
border-color: #444;
}
}
#-webkit-keyframes load {
0%, 40% {
height: 0;
}
90%,
100% {
height: 100%;
}
}
#keyframes load {
0%, 40% {
height: 0;
}
90%,
100% {
height: 100%;
}
}
#-webkit-keyframes dwd {
0%, 20% {
right: 45px;
top: 18px;
}
30%,
100% {
right: 25px;
}
30%,
40%,
50%,
60%,
70%,
80% {
top: 14px;
}
35%,
45%,
55%,
65%,
75%,
85% {
top: 22px;
}
54% {
color: #28F2B3;
box-shadow: 3px 3px #333, 6px 6px #28F2B3;
}
55%,
85% {
color: #333;
box-shadow: 3px 3px #28F2B3, 6px 6px #333;
border-width: 3px;
height: 15px;
}
90%,
100% {
box-shadow: 1px 1px #333;
border-width: 5px;
height: 25px;
color: #fff;
}
}
#keyframes dwd {
0%, 20% {
right: 45px;
top: 18px;
}
30%,
100% {
right: 25px;
}
30%,
40%,
50%,
60%,
70%,
80% {
top: 14px;
}
35%,
45%,
55%,
65%,
75%,
85% {
top: 22px;
}
54% {
color: #28F2B3;
box-shadow: 3px 3px #333, 6px 6px #28F2B3;
}
55%,
85% {
color: #333;
box-shadow: 3px 3px #28F2B3, 6px 6px #333;
border-width: 3px;
height: 15px;
}
90%,
100% {
box-shadow: 1px 1px #333;
border-width: 5px;
height: 25px;
color: #fff;
}
}
This way, the css for making the download button look the way you want it to only really targets the download button and not all the buttons. There are a lot of different points we could do into here, but in general, you might want to check out this article on css syntax
You can give different classes to both of them:
*,
*::after,
*::before {
box-sizing: border-box;
}
button.download-button {
width: 250px;
height: 70px;
margin: auto;
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
font-size: 22px;
border: 3px solid #28F2B3;
color: #28F2B3;
line-height: 64px;
background: none;
white-space: nowrap;
overflow: hidden;
box-shadow: 0 0 5px #222;
border-radius: 70px;
-webkit-animation: over 6s infinite;
animation: over 6s infinite;
}
button.download-button:before {
content: '';
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 0;
background: #28F2B3;
-webkit-animation: load 6s infinite;
animation: load 6s infinite;
}
button.download-button:after {
content: '';
position: absolute;
width: 15px;
height: 15px;
border-bottom: 3px solid;
border-right: 3px solid;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
box-shadow: 3px 3px #333, 6px 6px #28F2B3;
right: 45px;
top: 18px;
-webkit-animation: dwd 6s infinite;
animation: dwd 6s infinite;
}
#-webkit-keyframes over {
0%, 20% {
line-height: 64px;
width: 250px;
}
25%,
100% {
line-height: 150px;
border-color: #28F2B3;
}
30%,
100% {
width: 70px;
border-color: #444;
}
}
#keyframes over {
0%, 20% {
line-height: 64px;
width: 250px;
}
25%,
100% {
line-height: 150px;
border-color: #28F2B3;
}
30%,
100% {
width: 70px;
border-color: #444;
}
}
#-webkit-keyframes load {
0%, 40% {
height: 0;
}
90%,
100% {
height: 100%;
}
}
#keyframes load {
0%, 40% {
height: 0;
}
90%,
100% {
height: 100%;
}
}
#-webkit-keyframes dwd {
0%, 20% {
right: 45px;
top: 18px;
}
30%,
100% {
right: 25px;
}
30%,
40%,
50%,
60%,
70%,
80% {
top: 14px;
}
35%,
45%,
55%,
65%,
75%,
85% {
top: 22px;
}
54% {
color: #28F2B3;
box-shadow: 3px 3px #333, 6px 6px #28F2B3;
}
55%,
85% {
color: #333;
box-shadow: 3px 3px #28F2B3, 6px 6px #333;
border-width: 3px;
height: 15px;
}
90%,
100% {
box-shadow: 1px 1px #333;
border-width: 5px;
height: 25px;
color: #fff;
}
}
#keyframes dwd {
0%, 20% {
right: 45px;
top: 18px;
}
30%,
100% {
right: 25px;
}
30%,
40%,
50%,
60%,
70%,
80% {
top: 14px;
}
35%,
45%,
55%,
65%,
75%,
85% {
top: 22px;
}
54% {
color: #28F2B3;
box-shadow: 3px 3px #333, 6px 6px #28F2B3;
}
55%,
85% {
color: #333;
box-shadow: 3px 3px #28F2B3, 6px 6px #333;
border-width: 3px;
height: 15px;
}
90%,
100% {
box-shadow: 1px 1px #333;
border-width: 5px;
height: 25px;
color: #fff;
}
}
<button class="download-button">Download</button>
please help me to this code, how do i prevent the div resizing when i resizing the webpage.
any advice for this code sir/mam?
thanks in advance for the help.
sorry for my bad english :D
/** to prevent inputing numbers in textbox enter your mobile number */
function validate(evt) {
var theEvent = evt || window.event;
var key = theEvent.keyCode || theEvent.which;
key = String.fromCharCode( key );
var regex = /[0-9]|\./;
if( !regex.test(key) ) {
theEvent.returnValue = false;
if(theEvent.preventDefault) theEvent.preventDefault();
}
}/** to prevent inputing numbers in textbox enter your mobile number END */
/** For Checkbox */
jQuery(document).ready(function()
{
jQuery("#accept").click(function(){
if(jQuery("#button").is(":enabled"))
{
jQuery("#button").prop("disabled",true);
}
else
{
jQuery("#button").prop("disabled",false);
}
});});/** For Checkbox End*/
.plogo{
z-index:5;
position:absolute;
font-family: Georgia, serif;
line-height: 1em;
color: #ffffff;
font-weight:bold;
font-style:italic;
font-size: 72px;
text-shadow:0px 0px 0 rgb(56,56,56),1px 1px 0 rgb(56,56,56),2px 2px 0 rgb(56,56,56),3px 3px 0 rgb(56,56,56),4px 4px 0 rgb(56,56,56),5px 5px 0 rgb(56,56,56),6px 6px 0 rgb(56,56,56), 7px 7px 0 rgb(56,56,56),8px 8px 7px rgba(0,0,0,0.3),8px 8px 1px rgba(0,0,0,0.5),0px 0px 7px rgba(0,0,0,.2);
}
a {text-decoration: none;}
nav {
width: 100%;
height: 80px;
background: rgb(2,189,138);
position:absolute;
z-index:4;
}
ul li {
font: 13px Verdana, 'Lucida Grande';
cursor: pointer;
-webkit-transition: padding .05s linear;
-moz-transition: padding .05s linear;
-ms-transition: padding .05s linear;
-o-transition: padding .05s linear;
transition: padding .05s linear;
font-weight:bold;
}
ul li.drop {
position: relative;
}
ul > li {
display: inline-block;
}
ul li a {
color: #eee;
-webkit-transition: all .1s ease-out;
-moz-transition: all .1s ease-out;
-ms-transition: all .1s ease-out;
-o-transition: all .1s ease-out;
transition: all .1s ease-out;
}
ul li a:hover {
color: #eee;
}
.dropOut .triangle {
width: 0;
height: 0;
position: absolute;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-bottom: 8px solid white;
top: -8px;
left: 50%;
margin-left: -8px;
}
.dropdownContain {
width: 160px;
position: absolute;
z-index: 2;
left: 50%;
margin-left: -80px; /* half of width */
top: -400px;
}
.dropOut {
width: 160px;
background: white;
float: left;
position: relative;
margin-top: 0px;
opacity: 0;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: 0 1px 6px rgba(0,0,0,.15);
-moz-box-shadow: 0 1px 6px rgba(0,0,0,.15);
box-shadow: 0 1px 6px rgba(0,0,0,.15);
-webkit-transition: all .1s ease-out;
-moz-transition: all .1s ease-out;
-ms-transition: all .1s ease-out;
-o-transition: all .1s ease-out;
transition: all .1s ease-out;
}
.dropOut ul {
float: left;
padding: 10px 0;
}
.dropOut ul li {
text-align: left;
float: left;
width: 125px;
padding: 12px 0 10px 15px;
margin: 0px 10px;
color: #777;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-transition: background .1s ease-out;
-moz-transition: background .1s ease-out;
-ms-transition: background .1s ease-out;
-o-transition: background .1s ease-out;
transition: background .1s ease-out;
}
.dropOut ul li:hover {
background: #f6f6f6;
}
ul li:hover a { color: white; }
ul li:hover .dropdownContain { top: 65px; }
ul li:hover .underline { border-bottom-color: #777; }
ul li:hover .dropOut { opacity: 1; margin-top: 8px; }
.wrapper {
background: #50a3a2;
background: -webkit-linear-gradient(top left, #50a3a2 0%, #53e3a6 100%);
background: linear-gradient(to bottom right, #50a3a2 0%, #53e3a6 100%);
position: absolute;
top: 50%;
left: 0;
width: 100%;
height: 100% auto;
margin-top: -250px;
overflow: visible;
}
.container {
max-width: 600px;
margin: 20px;
padding: 80px 0;
height: 100% auto;
}
.container h1 {
font-size: 40px;
-webkit-transition-duration: 1s;
transition-duration: 1s;
-webkit-transition-timing-function: ease-in-put;
transition-timing-function: ease-in-put;
font-weight: 200;
}
.bg-bubbles {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
}
.bg-bubbles li {
position: absolute;
list-style: none;
display: block;
width: 40px;
height: 40px;
background-color: rgba(255, 255, 255, 0.15);
bottom: -160px;
-webkit-animation: square 25s infinite;
animation: square 25s infinite;
-webkit-transition-timing-function: linear;
transition-timing-function: linear;
}
.bg-bubbles li:nth-child(1) {
left: 10%;
}
.bg-bubbles li:nth-child(2) {
left: 20%;
width: 80px;
height: 80px;
-webkit-animation-delay: 2s;
animation-delay: 2s;
-webkit-animation-duration: 17s;
animation-duration: 17s;
}
.bg-bubbles li:nth-child(3) {
left: 25%;
-webkit-animation-delay: 4s;
animation-delay: 4s;
}
.bg-bubbles li:nth-child(4) {
left: 40%;
width: 60px;
height: 60px;
-webkit-animation-duration: 22s;
animation-duration: 22s;
background-color: rgba(255, 255, 255, 0.25);
}
.bg-bubbles li:nth-child(5) {
left: 70%;
}
.bg-bubbles li:nth-child(6) {
left: 80%;
width: 120px;
height: 120px;
-webkit-animation-delay: 3s;
animation-delay: 3s;
background-color: rgba(255, 255, 255, 0.2);
}
.bg-bubbles li:nth-child(7) {
left: 32%;
width: 160px;
height: 160px;
-webkit-animation-delay: 7s;
animation-delay: 7s;
}
.bg-bubbles li:nth-child(8) {
left: 55%;
width: 20px;
height: 20px;
-webkit-animation-delay: 15s;
animation-delay: 15s;
-webkit-animation-duration: 40s;
animation-duration: 40s;
}
.bg-bubbles li:nth-child(9) {
left: 25%;
width: 10px;
height: 10px;
-webkit-animation-delay: 2s;
animation-delay: 2s;
-webkit-animation-duration: 40s;
animation-duration: 40s;
background-color: rgba(255, 255, 255, 0.3);
}
.bg-bubbles li:nth-child(10) {
left: 90%;
width: 160px;
height: 160px;
-webkit-animation-delay: 11s;
animation-delay: 11s;
}
#-webkit-keyframes square {
0% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
-webkit-transform: translateY(-700px) rotate(600deg);
transform: translateY(-700px) rotate(600deg);
}
}
#keyframes square {
0% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
-webkit-transform: translateY(-700px) rotate(600deg);
transform: translateY(-700px) rotate(600deg);
}
}
.cacc{
z-index: 2;
position:relative;
height:10px;
width:280px;
}
input[type='text']{
font-size:18px;
font-family:modern, tahoma;
}
/*---------- For username --------------------------------*/
input[type='text'] {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
outline: 0;
border: 1px solid rgba(255, 255, 255, 0.4);
background-color: rgba(255, 255, 255, 0.2);
border-radius: 3px;
padding: 10px 15px;
display: block;
font-size: 18px;
color: #fff;
-webkit-transition-duration: 0.25s;
transition-duration: 0.25s;
font-weight: 300;
background-color: white;
color: #53e3a6;
}
/*---------- For username End--------------------------------*/
input[type='password'] {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
outline: 0;
border: 1px solid rgba(255, 255, 255, 0.4);
background-color: rgba(255, 255, 255, 0.2);
border-radius: 3px;
padding: 10px 15px;
display: block;
font-size: 18px;
color: #fff;
-webkit-transition-duration: 0.25s;
transition-duration: 0.25s;
font-weight: 300;
background-color: white;
color: #53e3a6;}
input[type='email'] {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
outline: 0;
border: 1px solid rgba(255, 255, 255, 0.4);
background-color: rgba(255, 255, 255, 0.2);
border-radius: 3px;
padding: 10px 15px;
display: block;
font-size: 18px;
color: #fff;
-webkit-transition-duration: 0.25s;
transition-duration: 0.25s;
font-weight: 300;
background-color: white;
color: #53e3a6;
}
.dlist{font-size: 18px; font-family:modern; color:grey; border-radius:5px; z-index:2; position:relative; }
.cbox{ position:relative; z-index:2;}
.logbutton {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
outline: 0;
background-color: #fff;
border: 0;
padding: 10px 15px;
color: #53e3a6;
border-radius: 3px;
width: 250px;
cursor: pointer;
font-size: 18px;
position: relative;
z-index: 2;
-webkit-transition-duration: 0.25s;
transition-duration: 0.25s;
}
.logbutton:hover {
background-color: #f5f7f9;
}
</head>
<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="js/jssor.slider.mini.js"></script>
<body style="background-color:#e8e8e8; margin:0px; padding:0px;">
<font class="plogo">  P . A . R . S</font>
<nav>
<ul>                                      
                                      
                         
<li>Home</li>    
<li>Log In</li>    
<li>Create Account</li>
<li class="drop">
Advertisement
<div class="dropdownContain">
<div class="dropOut">
<div class="triangle"></div>
<ul>
<li>Job Hiring</li>
<li>Tourist Spot</li>
<li>Restaurant & Bar</li>
<li>Foods</li>
<li>Party Events</li>
</ul>
</div>
</div>
</li>
<li>About Us</li>
</ul>
</nav>
<div class="wrapper">
<div class="container">
<center><h1 style="font-weight:bold;color:#fff;">CREATE ACCOUNT</h1>
<?php
?>
<form action=""><font style="color:#fff; font-weight:bold; font-size:18px;">
Choose your Username
<input type="text" class="cacc" placeholder="Create Username" />
Choose your Password
<input type="text" class="cacc" placeholder="Create Password" />
Your Email
<input type="email" class="cacc" placeholder="Enter your email" />
Your First Name
<input type="text" class="cacc" placeholder="First name" />
Your Last Name
<input type="text" class="cacc" placeholder="Last name" />
Your Mobie Number
<input type="text" onkeypress="validate(event)" class="cacc" placeholder="11 Digits Mobile Number" maxlength="11" />
Your Birthday<br />
<select class="dlist">
<option>Month</option>
<option>123</option>
</select>
<select class="dlist">
<option>Day</option>
</select>
<select class="dlist">
<option>Year</option>
</select><br />
Your Gender<br />
<select class="dlist">
<option>Gender</option>
<option>Male</option>
<option>Female</option>
</select><br />
<input type="checkbox" class="cbox" id="accept" required />
<br />
<input type="submit" value="Create Account" class="logbutton" disabled="disabled" id="button" />
</font></form>
</center></div>
</body>
please help me to this code, how do i prevent the div resizing when i resizing the webpage.
any advice for this code sir/mam?
thanks in advance for the help.
sorry for my bad english :D
Add min-width CSS property to the element you want to not be resized to lower than prefered width:
.YOUR_DIV_CLASS {
min-width: 500px; // Or any other width you prefer.
}
Or use width property and define width in px to make the div have static width.
changing each or some of those elements (depending on your needs)
... {
...
width: 100%;
...
}
into something like:
... {
...
width: 980px; (or whatever numeber you need)
...
}
I have one span, and I wrote code for bouncing element, but I can only to set interval for bouncing, but how to set unlimited/infinitely bouncing.
HTML
<div>
<span class="rect">!!!</span>
</div>
JS
$(document).ready(function(){
$('.rect').effect("bounce", { times: 3 }, 300);
})
http://jsfiddle.net/RGvjj/164/
Set success callback function in effect()
$(document).ready(function () {
var cmp = function () {
$('.rect').effect("bounce", {
times: 3
}, 300, cmp);
}
cmp();
})
FIDDLE
You can Bounce element through CSS3 infinity time
.bounce {
position:fixed;
left:50%;
bottom:0;
margin-top:-25px;
margin-left:-25px;
height:50px;
width:50px;
background:red;
-webkit-animation:bounce 1s infinite;
}
#-webkit-keyframes bounce {
0% { bottom:5px; }
25%, 75% { bottom:15px; }
50% { bottom:20px; }
100% {bottom:0;}
}
<div class="bounce"></div>
if you want to get more better Example but it's have very large code see below code:
body { background-color: #DDDDDD; font: 30px sans-serif; height: 350px;}
.ball-wrapper {
position: fixed;
width: 120px;
height: 300px;
margin-left: -60px;
left: 50%;
top: 20%;
}
.ball {
position: absolute;
width: 120px;
height: 120px;
border-radius: 70px;
background: -webkit-linear-gradient(top, rgba(187,187,187,1) 0%,rgba(119,119,119,1) 99%);
background: -moz-linear-gradient(top, rgba(187,187,187,1) 0%,rgba(119,119,119,1) 99%);
background: linear-gradient(top, rgba(187,187,187,1) 0%,rgba(119,119,119,1) 99%);
box-shadow: inset 0 -5px 15px rgba(255,255,255,0.4), inset -2px -1px 40px rgba(0,0,0,0.4), 0 0 1px #000;
-webkit-animation: jump 1s infinite;
-moz-animation: jump 1s infinite;
animation: jump 1s infinite;
}
.ball::after {
content: "";
position: absolute;
width: 60px;
height: 30px;
border-radius: 40px / 20px;
left: 30px;
top: 10px;
background: -webkit-linear-gradient(top, rgba(232,232,232,1) 0%,rgba(232,232,232,1) 1%,rgba(255,255,255,0) 100%);
background: -moz-linear-gradient(top, rgba(232,232,232,1) 0%,rgba(232,232,232,1) 1%,rgba(255,255,255,0) 100%);
background: linear-gradient(top, rgba(232,232,232,1) 0%,rgba(232,232,232,1) 1%,rgba(255,255,255,0) 100%);
}
.ball-shadow {
position: absolute;
left: 50%;
bottom: 0;
width: 50px;
height: 65px;
border-radius: 30px / 40px;
margin-left: -25px;
background: rgba(20, 20, 20, 0.1);
box-shadow: 0px 0 20px 35px rgba(20,20,20,.1);
-webkit-transform: scaleY(0.3);
-moz-transform: scaleY(0.3);
transform: scaleY(0.3);
-webkit-animation: shrink 1s infinite;
-moz-animation: shrink 1s infinite;
animation: shrink 1s infinite;
}
/**
* animation
*/
#-webkit-keyframes jump {
0% {
top: 0;
-webkit-animation-timing-function: ease-in;
}
40% {}
50% {
top: 140px;
height: 120px;
-webkit-animtion-timing-function: ease-out;
}
55% {
top: 160px;
height: 100px;
border-radius: 70px/60px;
-webkit-animation-timing-function: ease-in;
}
65% {
top: 110px;
height: 120px;
border-radius: 50%;
-webkit-animation-timing-function: ease-out;
}
95% {
top: 0;
-webkit-animation-timing-function: ease-in;
}
100% {
top: 0;
-webkit-animation-timing-function: ease-in;
}
}
#-moz-keyframes jump {
0% {
top: 0;
-moz-animation-timing-function: ease-in;
}
40% {}
50% {
top: 140px;
height: 120px;
-moz-animtion-timing-function: ease-out;
}
55% {
top: 160px;
height: 100px;
border-radius: 70px/60px;
-moz-animation-timing-function: ease-in;
}
65% {
top: 110px;
height: 120px;
border-radius: 50%;
-moz-animation-timing-function: ease-out;
}
95% {
top: 0;
-moz-animation-timing-function: ease-in;
}
100% {
top: 0;
-moz-animation-timing-function: ease-in;
}
}
#-webkit-keyframes shrink {
0% {
bottom: 0;
margin-left: -30px;
width: 60px;
height: 75px;
background: rgba(20, 20, 20, .1);
box-shadow: 0px 0 20px 35px rgba(20,20,20,.1);
border-radius: 30px / 40px;
-webkit-animation-timing-function: ease-in;
}
50% {
bottom: 30px;
margin-left: -10px;
width: 20px;
height: 5px;
background: rgba(20, 20, 20, .3);
box-shadow: 0px 0 20px 35px rgba(20,20,20,.3);
border-radius: 20px / 20px;
-webkit-animation-timing-function: ease-out;
}
100% {
bottom: 0;
margin-left: -30px;
width: 60px;
height: 75px;
background: rgba(20, 20, 20, .1);
box-shadow: 0px 0 20px 35px rgba(20,20,20,.1);
border-radius: 30px / 40px;
-webkit-animation-timing-function: ease-in;
}
}
#-moz-keyframes shrink {
0% {
bottom: 0;
margin-left: -30px;
width: 60px;
height: 75px;
background: rgba(20, 20, 20, .1);
box-shadow: 0px 0 20px 35px rgba(20,20,20,.1);
border-radius: 30px / 40px;
-moz-animation-timing-function: ease-in;
}
50% {
bottom: 30px;
margin-left: -10px;
width: 20px;
height: 5px;
background: rgba(20, 20, 20, .3);
box-shadow: 0px 0 20px 35px rgba(20,20,20,.3);
border-radius: 20px / 20px;
-moz-animation-timing-function: ease-out;
}
100% {
bottom: 0;
margin-left: -30px;
width: 60px;
height: 75px;
background: rgba(20, 20, 20, .1);
box-shadow: 0px 0 20px 35px rgba(20,20,20,.1);
border-radius: 30px / 40px;
-moz-animation-timing-function: ease-in;
}
}
<div class="ball-wrapper">
<div class="ball"></div>
<div class="ball-shadow"></div>
</div>