I need to reduce the size of the label on focus fro the text to be entered. Bring it back to the same size if no text entered or on click somewhere else. Below is the code snippet I am trying.
div {
height: 50px;
width: 200px;
border-bottom: 1px solid black;
-webkit-transition: width 2s;
transition: width 2s;
}
div:focus {
background-color: transparent;
width: 300px;
tansition: ease;
outline: 1px solid black;
}
label {
font-size: 20px;
}
<div tabindex="0">
<label>Three-colored border!</label>
</div>
Can this be achieved only in CSS or do i need to include any javascript or angular js?
I dont know how you intend to accept text using this div but to achieve the reduction of label font size, you can add div:focus label { font-size: 14px; } to your css and it'll reduce on focus.
div {
height: 50px;
width: 200px;
border-bottom: 1px solid black;
-webkit-transition: width 2s;
transition: width 2s;
}
div:focus {
background-color: transparent;
width: 300px;
transition: ease;
outline: 1px solid black;
}
div:focus label {
font-size: 14px;
transition: font 1s ease
}
label {
font-size: 20px;
transition: font 1s ease
}
<div tabindex="0">
<label>Three-colored border!</label>
</div>
Update: font reduction now goes in transition with the div
Css is for styling the elements only. The problem is detecting if input is empty. You cannot analyze the element with css. For that You need JS. var size = $("input").text().length;
And in html put onfocusout function to check the size. <label onfocusout="fn()">Three-colored border!</label>
When putting it together
function fn() {
var size = $("label").text().length;
if (size>0) {
$("div").addClass("goodClass");
} else {
$("div").addClass("badClass");
}
}
And of course, those style included in classes.
Related
This CSS makes the text appear with a typewriter effect. However the issue is that because of the white-space: nowrap in the CSS it only shows the top line.
So if I have text in a single <p> element that covers 4 lines, only the top line gets shown.
See the codepen for example.
p{
color: lime;
font-family: "Courier";
font-size: 20px;
margin: 10px 0 0 10px;
white-space: nowrap;
overflow: hidden;
width: 100%;
animation: type 4s steps(60, end);
}
#keyframes type{
from { width: 0; }
}
Are there any JS based solutions if it is not possible with pure CSS? I would like to not have to try to break up a paragraph into several <p> especially since the point at which there is a line break would get messed up when the width changed.
So if I have text in a single <p> element that covers 4 lines, only the top line gets shown.
Based on the above statement, I assume that the question is about text spanning multiple lines even when the maximum possible width is given to the element (that is, changing just the width is not an option).
As I had mentioned in my comment, the thing with animations like this is that if you remove the white-space: nowrap, it won't work like a typewriter effect because the full text will start getting typed at the same time (as only the width is being animated) and it will result in a weird animation because when the width is small the text will wrap-around and when it increases the text will also move to previous lines.
The text needs to be restricted to a single line or it should be split into multiple p tags like in the below snippet. If neither of these can be done then you should look at using JavaScript (or any library).
body {
background: #000;
padding-top: 10px;
width: 500px;
border: solid white 1px;
}
p {
color: lime;
font-family: "Courier";
font-size: 20px;
margin: 10px 0 0 10px;
white-space: nowrap;
overflow: hidden;
width: 0;
animation: type 4s steps(60, end) forwards;
}
p:nth-child(2) {
animation-delay: 4s;
}
p:nth-child(3) {
animation-delay: 8s;
}
p a {
color: lime;
text-decoration: none;
}
span {
animation: blink 1s infinite;
}
#keyframes type {
to {
width: 100%;
}
}
#keyframes blink {
to {
opacity: .0;
}
}
::selection {
background: black;
}
<p>hi folks, this is typing animation using</p>
<p>CSS. But on the second line it never</p>
<p>shows up. The other lines get cut off.</p>
The below is what would happen if you just remove white-space: nowrap. You can see how it does not work like a typewriter anymore.
body{
background: #000;
padding-top: 10px;
width: 500px;
border: solid white 1px;
}
p{
color: lime;
font-family: "Courier";
font-size: 20px;
margin: 10px 0 0 10px;
overflow: hidden;
width: 100%;
animation: type 4s steps(60, end);
}
p:nth-child(2){
animation: type2 8s steps(60, end);
}
p a{
color: lime;
text-decoration: none;
}
span{
animation: blink 1s infinite;
}
#keyframes type{
from { width: 0; }
}
#keyframes type2{
0%{width: 0;}
50%{width: 0;}
100%{ width: 100; }
}
#keyframes blink{
to{opacity: .0;}
}
::selection{
background: black;
}
<p>hi folks, this is typing animation using CSS But on the second line it never shows up. The other lines get cut off.</p>
If you are open to using a fully JS based approach for achieving this animation then you could follow the method used in this Fiddle. It is a customized version of the Fiddle contributed by Akshay. It uses a loop (based on setInterval) and then modifies the content of the element in every iteration. First it fetches only the first character of the content, then the first two, first three and so-on till the content is fully printed. The looping and the interval makes it look as though it is being typed out.
You can control the speed of the typing, the delay that is added between the typing of lines by passing the required values in the function call.
Try changing the the width of the body from 500px to 100%. Something like this below:
body{
background: #000;
padding-top: 10px;
width: 100%;
border: solid white 1px;
}
You can try this one
body{
background: #000;
padding-top: 10px;
width: 100%;
border: solid white 1px;
}
p{
color: lime;
font-family: "Courier";
font-size: 20px;
margin: 10px 0 0 1px;
white-space: nowrap;
overflow: hidden;
width: 100%;
animation: type 4s steps(60, end);
}
DEMO HERE
Functionality:
The Button should have the following effect when user hover above the button:
The Button should have a pop-up effect.
The Button border should have white shadow effect.
What has been done:
I have made use of
img:hover{
border-color: white;
}
to try to get the effect of the a border shadow of white.
Issue:
I can't really seem to get the said effect. However, I was able to get the effect such as this :
img:hover{
background-color: white;
}
when user hover above the button.
Hence, how am I able to create the css such that when user hover above the button, it will create the said effect.
Thanks.
img:hover {
border-color: white;
}
#Button1 {
position: absolute;
top: 310px;
left: 1550px;
outline: 0px;
z-index: 2;
border: 0;
background: transparent;
}
<button id="Button1" onclick="GreatLoveInSingapore()">
<img src="lib/img/GreatLoveButton.png">
</button>
If you want just to grow up your button you should use transfrom it allow you to scale your button
div{
margin: 50px 200px;
}
button{
border: 0;
padding: 0;
cursor: pointer
}
img {
height: 100px;
width: 100px;
display: block;
transition: 0.7s;
}
img:hover{
transform: scale(1.2);
}
<div>
<button class="container">
<img src="http://i.imgur.com/IMiabf0.jpg">
</button>
</div>
EDIT: another way if you have img not text
div.container {
text-align: center;
margin: 100px auto 0;
}
a {
display: inline-block;
background-color: #1984c3;
color: #fff;
font-size: 1.5em;
font-family: 'Calibri', sans-serif;
font-weight: lighter;
padding: 1em 2em;
text-decoration: none;
text-transform: uppercase;
-moz-transition: 0.3s;
-webkit-transition: 0.3s;
transition: 0.1s;
}
a:hover{
transform: scale(1.2);
}
<div class="container">
Hi Im a Button
</div>
Here's a link that can help you.
http://ianlunn.github.io/Hover/
this page has a collection of over effects.
Example of padding....
button{
transition: padding 1s;
}
button:hover {
box-shadow: 0px 5px 5px #888888;
padding:15px;
}
<button><img src="#"/></button>
Transition is used to give the button an animated stretch and box-shadow for the pop-out effect. This is just a quick example mainly to focus on the padding.
I'm sure you can expand on this applying more styles to fit your needs.
Any questions please leave a comment below and I will get back to you as soon as possible.
I hope this helps. Happy coding!
I currently have my text appearing when a user hovers over it in the following manner:
.item{
color: transparent;
font-weight: bold;
text-align: center;
}
And then in my JQuery over hover I set the color to black:
$(".item").hover(function () {
$(this).css("color", "black");
}, function () {
$(this).css("color", "transparent");
});
I ask however, if there is some sort of webkit-animation or some scrolling feature I am unaware of if I wanted to have the text when the div is hovered scroll from the bottom of the div into its place in the middle or at whatever location it resides at
I am looking at past answers and I am finding some very long and complicated answers for this and was hoping for something easy I am overlooking.
Using CSS transition
JS Fiddle
.item {
width: 300px;
height: 300px;
outline: 1px solid skyblue;
margin: 5px;
text-align: center;
}
.item .content {
position: relative;
top: 270px;
/* 270px top + 30px line height = 300px outer container height */
line-height: 30px;
-webkit-transition: all 1s;
transition: all 1s;
}
.item:hover .content {
/* centering text vertically 135px top + 15px (line-height/2) = 150px half the container height */
top: 135px;
}
<div class="item"><span class="content">dummy text for test</span>
</div>
I am creating a relationship editor. The user create some elements and is able to link them creating a relationship (bidirectional). I've created the first part (users creating elements). Now I need to create lines connecting two DIVs when users double click an element, for example.
I know that may have a couple of ways to do it, but actually I have no idea how to start it. What would be a starting point?
$(function() {
$("#BtInsert").button()
.click(function() {
var pad = "000000"
var cor = "" + Math.floor(Math.random() * 16777215).toString(16);
cor = "#" + pad.substring(0, pad.length - cor.length) + cor;
var newDIV = document.createElement('div');
$(newDIV).addClass("base")
.appendTo($("#container"))
.html('N')
.dblclick(function() {
alert('Want to start to create a line from this div to another double click');
})
.draggable({
containment: "parent"
})
.css({
left: Math.floor(Math.random() * ($("#container").width() - $(".base").width())),
top: Math.floor(Math.random() * ($("#container").width() - $(".base").width()))
})
.css("background-color", cor);
})
});
#BtInsert {
top: 405px;
width: 400px;
position: absolute;
}
body {
margin: 0px;
padding: 0px;
}
#container {
border: solid 1px #CCC;
width: 400px;
height: 400px;
padding: 0;
margin: 0;
top: 0;
left: 0;
background-color: whitesmoke;
}
.base {
height: 50px;
width: 50px;
top: 30px;
left: 30px;
border-radius: 25px;
box-shadow: 2px 2px 2px #888888;
vertical-alignment: middle;
line-height: 50px;
text-align: center;
margin-bottom: 5px;
font-family: Calibri;
font-weight: bold;
font-size: 2em;
color: white;
background-color: #CCC;
cursor: pointer;
-webkit-transition: width 3s, height 3s, border-radius 3s, line-height 3s, box-shadow 3s;
transition: width 3s, height 3s, border-radius 3s, line-height 3s, box-shadow 3s;
float: left;
position: absolute;
z-index: 0;
}
.base:hover {
z-index: 1000;
color: #333;
width: 80px;
height: 80px;
border-radius: 50px;
line-height: 80px;
box-shadow: 4px 4px 4px #888888;
-webkit-transition: width 1s, height 1s, border-radius 1s, line-height 1s, box-shadow 1s;
transition: width 1s, height 1s, border-radius 1s, line-height 1s, box-shadow 1s;
}
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<div id="container">
</div>
<a href="#" id="BtInsert">
Insert an element
</a>
JS Fiddle
Its better to use SVG instead of HTML for this kind of representations. you will have more flexibility in drawing shapes in SVG.
You can take a look at http://d3js.org/ or http://raphaeljs.com/
See this examples:
http://bl.ocks.org/enoex/6201948
http://blog.stephenboak.com/2012/06/15/d3-flow-vis-tutorial.html
-> https://web.archive.org/web/20130108020533/http://blog.stephenboak.com:80/2012/06/15/d3-flow-vis-tutorial.html
it's doing something similar to what you want.
Here is my (simplified) situation:
http://jsfiddle.net/qFhaq/
Clicking the button launches an animation that expands the height of the div. While the div is expanding, the :after pseudo-element (containing the text 'look') disappears and then reappears at the end of the animation.
Is there a way to prevent the pseudo-element from disappearing, so that it's visible throughout the animation?
Add "overflow" CSS rule to #main and set it to "visible !important;"
#main{
width: 200px;
height: 200px;
background-color: #eee;
border: 1px solid black;
overflow:visible !important;
}
I rewrite it that it used CSS3 transition:
JS (for fast, for better you can change it to vanilla js):
$(function(){
$("#clicky").click(function(){
$("#main").addClass('animate');
});
});
CSS:
#main{
width: 200px;
height: 200px;
background-color: #eee;
border: 1px solid black;
-webkit-transition: height 2s linear;
}
#main:after{
content: "look";
height: 50px;
background-color: white;
margin-left: 210px;
border: 1px solid black;
}
#main.animate{
height: 500px;
}
http://jsfiddle.net/qFhaq/1/