I am trying to write a telugu text using uni codes so that I can highlight the text by changing into multiple colours according to sound. for that I am using html5 and js
<div class="pa">ప</div>
<div class="paa">పా</div>
by using
$("#paa").animate({ color: "blue" }, 500);
I can change the entire colour of the letter but
now I want to highlight some part of that letter . Please suggest how it can be done.???
there is a few css tricks to fake the background-clip:text; or something alike SVG.
span {
position:relative;
color:green;
}
span:before {
position:absolute;
top:0;
left:0;
overflow:hidden;
content:attr(data-text);
color:blue;
height:0.7em;
overflow:hidden;
animation: txtclr 4s infinite;
}
p {
background:yellow;
color:rgba(128, 0, 128 , 0.5);
font-size:2em;
font-weight:bold;
background:linear-gradient(to bottom,lightgray 50%,yellow 50%);
display:table;/* demo purpose to shrink to text size*/
box-shadow:inset -3em 0 rgba(100,100,100,0.5);
}
#keyframes txtclr {
0% {
height:50%;
}
25%,75%{
height:0;
width:0;
}
50%{
height:100%;
}
}
<p><span data-text="my text">my text</span> and some other text </p>
run code snippet and see green text filling with blue from top to bottom.
no prefix added, later browser do not need it :)
It is feasible, but not easy with all languages.
In the following example, I colored accents on certain letters.
http://jsfiddle.net/07hh3z2n/5/
The hint is to use a CSS to get an inline-block with no width.
.phantom {
display: inline-block;
color: red;
width: 0;
overflow: visible;
}
If the part of the letter you want to highlight is an existing unicode char, this will work fine. Otherwise, you can try to use (or create) a special font with the parts of letters to highlight.
Do you mean something like this? uses only css to flow the text over it, no need for javascript in this example ;-) but you could always switch out classes with desired effect and such.
What it does is uses the transition property that allows it to animate inbetween different css states after an event like hover, click active and such.
To highlight a part of a letter, you need to add that HTML element twice. What I have done with coloured and plain. This also counts for individual letters. You need to set them to an absolute position and wrap them in a relative div. By doing that they will position themselves absolutely to the top left location(in my example) of the the relative wrapper div. This way you can keep text flow if you use a <span> for a wrapper fo example
Then you set one to width 0 or to whatever width you want it to cover up half the other letter
In my example only half of the Y is red, the other half(half ish) is not red.
If you wish to cover a top half you can play with height.
http://jsfiddle.net/L9L8L966/1/
#container {
font-size:40px;
position:relative;
background-color:#CCC;
width:450px;
height:40px;
}
#coloured {
position:absolute;
z-index:2;
top:0px;
left:0px;
display:block;
width:0%;
-webkit-transition: width 1s ease-in-out;
-moz-transition: width 1s ease-in-out;
-o-transition: width 1s ease-in-out;
transition: width 1s ease-in-out;
color:red;
overflow:hidden;
}
#container:hover #coloured {
width:100%;
}
#plain {
position:absolute;
z-index:1;
width:100%;
display:block;
top:0px;
left:0px;
color:black;
}
<div id="container">
<div id="coloured">
abcdefghijklmnopqrstuvwxyz
</div>
<div id="plain">
abcdefghijklmnopqrstuvwxyz
</div>
</div>
If you want to highlight on the fly in your code, I would use a javascript frame work Highlight.js . it is very light and easy to work with. Here is a fiddle with jquery and knockout sample:
$('.searchme').highlight('high');
sample
Related
Is there a way to use transform: scale() on only the background image?
What I want to do is on hover make the background scale up
html
<div class="square">
//Content in here
</div>
css
.square{
background: url('image goes here');
background-size: cover;
height: 50vw;
width: 50vw;
so I don't want the content to scale only the background image on hover
If anyone knows a way I can do this would be great
Thanks
If it's just the background-size and you're not relying on "cover" or "contain" for the initial value, then changing the background-size on hover should be enough.
If not, stacking a pseudo-element with the background while keeping your element background transparent, then using the transforms on the pseudo-element will do the trick
edit: Adding example :)
<style>
.container{
overflow:hidden;
position:relative;
}
.scalable-bg::before{
content:"";
background:url('http://lorempixel.com/600/400');
background-size:cover;
position:absolute; top:0; left:0;
width:100%; height:100%;
z-index:-1;
transition:all 1s ease;
}
.scalable-bg{
padding:2em;
color:white; text-shadow: 2px 2px 0 black;
}
.scalable-bg:hover::before {
transform: scale(2);
}
</style>
<div class="container">
<div class="scalable-bg">
<h1>
Something
</h1>
<p>
Something, something, something, darkside. Something, something, complete
</p>
</div>
</div>
https://jsfiddle.net/2kzk1acr/3/
my first post!
I have been doing some experiments, trying to recreate something i saw.
Here is what i am trying to achieve:
Scroll at the end of this page and take a look at animated buttons for twitter, youtube, facebook
Now take a look at my code:
HTML
<div class="container">
<div class="letter">A</div>
</div>
CSS
*{
margin:0;
padding:0;
}
.container{
width:200px;
height:200px;
background:purple;
overflow:hidden;
}
.letter{
text-align:center;
font-size:50px;
line-height:170px;
color:white;
}
.letter:hover{
cursor:pointer;
}
.letter.zoom{
transform:rotate(15deg) scale(3);
transition: transform 0.6s ease;
}
Jquery
$(function(){
$('.container').on('click', function(){
$('.letter').toggleClass('zoom');
});
});
Now, if you run the code, you will see letter A, and on click it will zoom in and slightly rotate. Here are my issues:
1.how to do this on hover, using css3 or jquery or javascript?(not onmouseover/onmouseout)
2.how to make the rendering smoother?(the letter zooms in in poor resolution and than renders to full quality)
3.it has animated transition on zoom in. When it zooms out there is no animation or transition. How to do the animation on zoom out, on hover out?
I have tried to do separately just zoom in and just rotate, and it works, but if i want to do both in the same time, CSS3 is overriding one with another, and using this function is not giving me the result i want.
You can do this with just CSS:
Transition:
.letter {
transition: ease .25s; // when set on selector itself, will apply to all pseudo-classes such as: :hover, :active, :focus, etc.
-webkit-transition: ease .25s;
}
Zoom:
.letter:hover {
transform: scale(1.5); // Alternatively, you can use percentages
-wekbit-transform: scale(1.5); // Chrome / Safari
-moz-transform: scale(1.5); // Firefox
}
Rotate:
.letter:hover {
transform: rotate(15deg);
-wekbit-transform: rotate(15deg); // Chrome / Safari
-moz-transform: rotate(15deg); // Firefox
}
What's intended
I'm using a off canvas menu using CSS and JavaScript. The off canvas menu is working as intended. I want a sidebar menu that is left of the screen and moves along when the menu is triggered. The idea is to have a menu trigger that is 100px across and has a height of 100% and always left of the screen. Using position absolute I had problems with the height on all browsers, using fixed position Firefox works fine but encounters problems mentioned below.
Errors
Firefox Issues: None, as far as I can tell.
Chrome Issues: After scrolling a few pixels down the sidebar menu trigger does not stretch the entire page.
Internet Explorer: The sidebar seems to vanish completely when the sidebar menu is triggered.
jsFiddle
Because my code is heavy on both HTML, CSS and JavaScript I have included a jsFiddle. Please note that the problem only occurs on Chrome and Internet Explorer as far as I know. You can replicate the problem by scrolling down the page a little and then clicking the left hand side menu button.
Screenshots
NOTE WORTHY HTML CODE (Full Code in Fiddle)
<div id="sbContainer" class="sbContainer">
<div class="sbPush">
<header class="contain-to-grid sbMenu sbFX">
<nav class="top-bar" data-topbar>
<ul class="title-area show-for-small-only"><!--SITENAME--></ul>
<section class="top-bar-section"><!--LINKS--></section>
</nav>
</header>
<div class="sbContent-one">
<div class="sbContent-two">
<div class="sbMenuTrigger" data-effect="sbFX"><!--SIDEBAR TRIGGER--></div>
<div class="sbMainContent" role="document"><!--PAGE CONTENT--></div>
</div>
</div>
</div>
</div>
NOTE WORTHY CSS CODE (Full Code in Fiddle)
html, body, .sbContainer, .sbPush, .sbContent-one {
height:100%
}
.sbContent-one {
overflow-x:hidden;
background:#fff;
position:relative
}
.sbContainer {
position:relative;
overflow:hidden
}
.sbPush {
position:relative;
left:0;
z-index:99;
height:100%;
-webkit-transition:-webkit-transform .5s;
transition:transform .5s
}
.sbPush::after {
position:absolute;
top:0;
right:0;
width:0;
height:0;
background:rgba(0,0,0,0.2);
content:'';
opacity:0;
-webkit-transition:opacity 0.5s,width .1s 0.5s,height .1s .5s;
transition:opacity 0.5s,width .1s 0.5s,height .1s .5s
}
.sbMenu-open .sbPush::after {
width:100%;
height:100%;
opacity:1;
-webkit-transition:opacity .5s;
transition:opacity .5s
}
.sbMenu {
position:absolute;
top:0;
left:0;
z-index:100;
visibility:hidden;
width:244px;
height:100%;
background:#872734;
-webkit-transition:all .5s;
transition:all .5s
}
.sbMenu::after {
position:absolute;
top:0;
right:0;
width:100%;
height:100%;
background:rgba(0,0,0,0.2);
content:'';
opacity:1;
-webkit-transition:opacity .5s;
transition:opacity .5s
}
.sbMenu-open .sbMenu::after {
width:0;
height:0;
opacity:0;
-webkit-transition:opacity 0.5s,width .1s 0.5s,height .1s .5s;
transition:opacity 0.5s,width .1s 0.5s,height .1s .5s
}
.sbFX.sbMenu-open .sbPush {
-webkit-transform:translate3d(300px,0,0);
transform:translate3d(244px,0,0)
}
.sbFX.sbMenu {
-webkit-transform:translate3d(-100%,0,0);
transform:translate3d(-100%,0,0)
}
.sbFX.sbMenu-open .sbFX.sbMenu {
visibility:visible;
-webkit-transition:-webkit-transform .5s;
transition:transform .5s
}
.sbFX.sbMenu::after {
display:none
}
.no-csstransforms3d .sbPush,.no-js .sbPush {
padding-left:244px
}
.sbMenuTrigger {
background-color:#b23445;
cursor:pointer;
height:100%;
width:100px;
position:fixed;
left:0;
top:0
}
.sbMainContent {
margin-left:100px;
width:calc(100% - 100px);
top:0;
padding-top:50px;
position:absolute;
height:100%
}
Here is a work-around that requires very little changes.
It works consistently in the latest versions of FF, Chrome, and IE11/10.
Updated Example
.sbContent-one {
overflow: visible; /* Or remove overflow-x: hidden */
}
.sbMainContent {
overflow-x: hidden;
}
.sbMenuTrigger {
position: static; /* Or remove position: fixed */
}
The easiest way to resolve the issue in Chrome is to simply move the overflow from .sbContent-one to .sbMainContent. In doing so, you can't actually scroll past the .sbMenuTrigger element (which resolves the issue) since .sbMainContent is a sibling element.
There are currently many inconsistencies across browser around how fixed elements are positioned relative to elements that are transformed using translate3d. The issue in IE was due to the fact that fixed elements are positioned relative to the window without taking the elements that are transformed using translate3d into account. To solve this avoid fixed positioning completely, and add the element .sbMenuTrigger back into the normal flow by removing position: fixed (or overriding that with position: static, the default). In doing so, the sidebar expands as expected.
In other words:
Remove overflow-x: hidden from .sbContent-one (or override it with overflow: visible).
Add overflow-x: hidden to .sbMainContent.
Remove position: fixed from .sbMenuTrigger (or override it with position: static).
Here is my solution to your problem. Tested on 3 mayor browsers and it works fine!
see fiddle
Take a look at my changes on the following classes:
remove position relative from .sbContent-one
add height: 100% to .sbContent-two (new rule)
major changes on .sbMainContent
position absolute for .sbMenuTrigger
the main problems were:
unnecessary position relative and absolute position from .sbContent-one and .sbMainContent.
position fixed is relative to the window, so its behavior varies across browsers when you translate the element.
I managed to make it working on last chrome/IE11.
jsfiddle
I moved the
<div class="sbMenuTrigger" data-effect="sbFX">
<div class="sbMenuIcon">
<div class="sbMenuIconBackground"></div>
<div class="sbMenuIconOverlay"></div>
</div>
<div class="sbMenuLogo">
<div class="sbMenuLogoBackground"></div>
<div class="sbMenuLogoOverlay"></div>
</div>
</div>
At the end of the <header> tag, so the CSS became:
.sbMenuTrigger {
background-color:#b23445;
cursor:pointer;
width:100px;
position:absolute;
right:-100px;
top:0;
bottom: 0;
}
The position fixed + transform are not always welcome by all browsers.
I don't know how to make clearer the title of the question.
I have an effect where it shows a text with grey color and with keyframes in css the characters become black with the animate css property.
I wonder how could I acomplish that effect but with an image, transitioning from b&w to color from the left to the right.
This is the code:
<div class="modal">
<h1 id="testid" data-content="THIS IS A TEST">THIS IS A TEST</h1>
</div>
And the CSS:
#-webkit-keyframes loading{
from{max-width:0}
}
#-moz-keyframes loading{
from{max-width:0}
}
#-o-keyframes loading{
from{max-width:0}
}
#keyframes loading{
from{max-width:0}
}
.modal {
background:#fff;
position:fixed;
top:0;
bottom:0;
left:0;
right:0;
z-index:9999999;
}
.modal h1 {
position:absolute;
left:50%;
top:50%;
margin-top:-15px;
margin-left:-125px;
font-size:30px;
text-align:center;
color:rgba(0,0,0,.2);
}
.modal h1:before {
content:attr(data-content);
position:absolute;
overflow:hidden;
color:#000;
max-width:100%;
-webkit-animation:loading 5s;
-moz-animation:loading 5s;
-o-animation:loading 5s;
-ms-animation:loading 5s;
animation:loading 5s;
}
The code running here: http://jsfiddle.net/5Vmnn/
Thank you
Maybe you were thinking of something like this?
Fiddle
It's not greyscale, but it provides a similar effect.
EDIT: Here's a version for Webkit with greyscale using -webkit-filter (still right-to-left...)
I've changed your overlay to use opacity, but the principle is the same:
.modal {
opacity: 0.8;
background:black;
z-index:9999999;
position: absolute;
left: 0;
top: 0;
max-width:0;
-webkit-animation:loading 5s;
-moz-animation:loading 5s;
-o-animation:loading 5s;
-ms-animation:loading 5s;
animation:loading 5s;
width: 100%;
height: 100%;
}
I would make an animated GIF which I think is far easier.
Make 5-10 images each a varying amount b&w and colour and then use ImageMagick to make an animated GIF out of them with a single line like this:
convert -delay 20 -loop 0 *.jpg animated.gif
You may want loop=1 for a single loop, whereas I have it set to zero for infinite looping in the example.
View animated GIF here
In case you are not familiar with Photoshop, I added a Hue Saturation layer and cranked the Saturation down to zero making a black and white image. Then I pressed G for Gradient Tool and drew a horizontal line across the image to specify where the transition is from B&W to colour whilst holding the Shift key to ensure it was horizontal. Then saved it as a 1.jpg and redrew the gradient in a different place and saved it again as 2.jpg and so on.
How to change div background-color with fadeIn/Out,I only want to fade background color,not background image,Please give me some useful code or solution
Although only supported by modern browsers you might also consider using CSS transitions to achieve the same effect
HTML
<div class='foobar'></div>
CSS
.foobar {
/* transition properties */
transition: background-color 2s;
-moz-transition: background-color 2s;
-webkit-transition: background-color 2s;
-o-transition: background-color 2s;
/* basic styling & initial background-color */
background-color:maroon;
width:100px;
height:100px;
}
/* Change background color on mouse over */
.foobar:hover {
background-color:blue;
}
Working example here, http://jsfiddle.net/eRW57/14/
<script>
$(document).ready(function(){
$("p").toggle(function(){
$("body").css("background-color","green");},
function(){
$("body").css("background-color","red");},
function(){
$("body").css("background-color","yellow");}
);
});
</script>
try it.. that should work fine
You can't fade just the background (color or otherwise) of an element using jQuery's fadeIn/fadeOut.
What you can do is place an additional layer (DIV, etc) with your background color and fade in/out on that.
Instead of something like this:
<div id="my-background"></div>
Use this structure:
<div id="container">
<div id="my-background"></div>
</div>
CSS
#container
{
position:relative;
width:200px;
height:100px;
background-image:url(my-background-image.jpg);
}
#my-background
{
height:100%;
width:100%;
background-color:blue;
position:absolute;
z-index:99;
}
Then use jQuery's fadeIn/fadeOut methods
JS
jQuery("#my-background").fadeOut();
with this you can fadeout all div's with id #my-background
var $div = $('#my-background');
$div.each(function blank(){
$(this).animate({'backgroundColor': '#fff'},2000);
});