Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 8 years ago.
Improve this question
So i came accross the following template but due to the fact they have base64 encrypted their javascript / page elements for god only knows what reason it makes seeing the source code very difficult.
http://yootheme.com/demo/themes/joomla/2010/planet/index.php?option=com_content&view=article&id=44&Itemid=53&preset=default
But on that page the header bar with the class "header-bg" seems to have the background-position constantly changing most likely via the use of javascript and i like the design and effect of the colors so i am curious if someone can help me or fiddle to me a demo of how they are doing this.
I love the way the border effect is constantly rotating around in different variations of colors like that. (Not sure if anyone else finds that beautiful)
They use a background image, and they animate background-position using JS.
Here I use CSS animations instead:
#keyframes bg {
from {
background-position: 0 0;
}
to {
background-position: 1500px 0;
}
}
.header-bg {
border-radius: 15px; /* outerRadius */
padding: 3px; /* separation */
animation: bg 10s infinite linear;
background: url("data:image/jpeg;base64,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") repeat scroll 0px 0px transparent;
}
.header-inner {
background: #fff;
border-radius: 12px; /* outerRadius - separation */
padding: 5px;
}
<div class="header-bg">
<div class="header-inner">Foo bar</div>
</div>
Also note that a gradient could be used instead of that image.
Related
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 3 years ago.
Improve this question
How do I apply 2 different CSS transforms to a single HTML element with different transform-origin for each?
You would need to work out the matrix value for each and then add them together using matrix mathematics. Their are some online calculators that can help with this
http://angrytools.com/css-generator/transform/
Set two DOM's of the same size, Set transform-origin for each individually
div{
height: 300px;
width: 300px;
}
.origin1 {
background-color: orange; /*Set to transparent*/
transform-origin: 0 0;
transform: scale(0.5, 0.5);
}
.origin2 {
background-color: blue;
transform-origin: 300px 300px;
transform: rotate(45deg)
}
<div class="origin1">
<div class="origin2"></div>
</div>
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 3 years ago.
Improve this question
I am not good in front end. But now I need to write some jQuery. What I want to do is I have a text box. It has many parents element including HTML body tag. What I want to do is I want to change all the color a little dark with opacity for the rest of elements except that text box when it is focused.
The fading is something like modal box in Bootstrap. How can I achieve that?
you could add a huge box-shadow (100vmax is enough to cover all the viewport), maybe with a short transition, to the input element when it receives focus, e.g.
input {
box-shadow: 0 0 0 100vmax rgba(0,0,0, 0);
transition: 1s box-shadow
}
input:focus {
box-shadow: 0 0 0 100vmax rgba(0,0,0, .7);
}
Codepen example: http://codepen.io/anon/pen/pjpqjg
When the input loses the focus, the effect disappears with the same duration.
Note: On Safari this effect based on box-shadow doesn't work unless you set -webkit-appearance: none;, but you might use an outline instead (tested on Version 9.0 (9537.86.1.56.2)/MacOS 10.9.5)
input {
outline: 100vmax rgba(0,0,0, 0) solid;
-webkit-transition: 1s outline;
transition: 1s outline;
}
input:focus {
outline: 100vmax rgba(0,0,0, .7) solid;
}
Codepen example: http://codepen.io/anon/pen/pjpqRb
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 years ago.
Improve this question
I have 3 rectangles that I've created with CSS. I want them to be clickable and link them to a file called "index.html". I've been searching over the web but could not find a way to do it. Is there also a way where hovering your mouse over the rectangle would just have the index.html file pop up but not open in a completely new window? Here is a snippet of what I have so far:
.rec
{
height: 100px;
width: 125px;
}
#d1
{
background : lightgreen;
border: 2px solid black;
display: inline-block;
left: 0%;
}
#r1
{
background : red;
border: 2px solid black;
display: inline-block;
left: 10%; position: relative;
}
#r3
{
background : white;
border: 2px solid black;
display: inline-block;
left: 20%; position: relative;
}
You should see JavaScript and jQuery tutorials. It's what, mostly, makes web pages interactive. Although in here, the best solution is clearly to use
<a href="index.html">
it would be good for you to learn them, and their incredible power. Check this fiddle here: http://jsfiddle.net/qjntjyyr/
As you can see, it's quite simple. In the next fiddle, I'm using an event for when the mouse goes over the squares.
http://jsfiddle.net/qjntjyyr/1/
Have fun with it, you can manipulate almost everything you want.
The clickable rectangles:
Index
Index
Index
As for the little box that appears when you hover them, you could use a title="" in the anchor tag, but that has the default styling the OS gives it. To customize one yourself you'd need JavaScript.
I found an interesting link to learn for your problem:css-trick
But the first answer is a good one to use.
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
We don’t allow questions seeking recommendations for books, tools, software libraries, and more. You can edit the question so it can be answered with facts and citations.
Closed 7 years ago.
Improve this question
Hello Everyone!
I am designing a website for myself and I am making this sick front page but I need to know how to make it work.
From this when it's normal:
http://i.stack.imgur.com/QM0c0.png (Copy and paste in a different browser, I cannot post direct images)
And this would be how it'd look when you hover over it, the background would fade black and the image would pop out with a bigger size:
http://i.stack.imgur.com/dsvmu.png
Anyone knows how to do this?
Kind Regards!
You will need to make 2 divs
'Div1 Small Button' and
'Div2 Big Button'
Then you will need to make them showing and hiding with jQuery.
And make it like: if hover that button then show Div2 Big Button else hide.
This is how you do it with pure CSS. Best way is to use the :hover property.
HTML:
<img src="http://i.stack.imgur.com/dsvmu.png"/>
CSS:
img{
height:200px;
width:200px;
}
img:hover{
width:400px; /*OR transform: scale(1.5)*/
box-shadow: 10px 10px 5px #888888;
}
Fiddle here. Hover over the image to see the effect.
Also if you want the background to be colored as in your image then wrap the image inside a div. And use the following css:
<div><img src="http://i.stack.imgur.com/dsvmu.png"/></div>
CSS:
div {
pointer-events: none;
}
img {
pointer-events: auto;
}
div:hover {
background: rgba(0,0,0,0.3);
}
img{
height:200px;
width:200px;
}
img:hover{
width:400px; /*OR transform: scale(1.5)*/
box-shadow: 10px 10px 5px #888888;
}
Upadated fiddle.
I will suggest to use transform css property to resize the same image when user hover on it.
.banner img:hover {
transform: scale(1.25);
}
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking for code must demonstrate a minimal understanding of the problem being solved. Include attempted solutions, why they didn't work, and the expected results. See also: Stack Overflow question checklist
Closed 9 years ago.
Improve this question
In the new google maps, when you click on on the map, it looks like a circle animates from the point you clicked that expands then disappears. When you click on a road, a dot appears, and appears to pulsate every few seconds. How can one accomplish this effect with or without google maps?
In other words, a user can click on a blank space on a page and have the same animated click effect where:
1) Clicking anywhere on HTML page or within a div causes a circle to slowly expand from where the user clicked to be about 5px, then fades out and disappears.
2) Clicking anywhere on HTML page or within a div causes a dot of maybe 3px to appear on the page and (a second circle?) that enlarges from the point of the dot with outline only, that expands for 5px... fades out and disappears... over and over again. (dot remains in place, just the animated circle that continues to "pulsate"
Looking for the best solution can be anywhere from CSS3, Javascript (with or without any libraries) or HTML5.
Interesting idea. After some fiddling, here are the approaches I made
1) Using javascript to append a new element at the clicked location and some CSS animations I came up with this demo
The corresponding CSS animation:
#keyframes grow {
0% {
width: 5px;
height: 5px;
margin-top: -2.5px;
margin-left: -2.5px;
}
50% {
margin-top:-7.5px;
margin-left: -7.5px;
width: 15px;
height: 15px;
opacity: 1;
}
100% {
margin-top:-12.5px;
margin-left: -12.5px;
width: 25px;
height: 25px;
opacity: 0;
}
}
2) I couldn't recreate what you mean for this one on Google maps, but from your description I came up with this demo
The corresponding CSS animation for that:
#keyframes pulse {
0% {
width: 5px;
height: 5px;
margin-top: -4.5px;
margin-left: -4.5px;
}
100% {
margin-top:-14.5px;
margin-left: -14.5px;
width: 25px;
height: 25px;
}
}
These approaches will work on any browsers that support CSS3 animation, the list can be found here. A fallback similar solution would be to use the same approach but use jQuery's .animate or something similar instead
If animations are not supported, the first would simply be a 5px by 5px circle, removed after a second. The second would be a black dot that lasts until the document is clicked again.
Side note: in its current state it won't work in IE I believe because it does not support document.getElementsByClassName