I need the below code to push surrounding text out of the way.
The CSS transition currently expands and ignores the surrounding text going over it if the transition is to large. I need a good way of having the text around the transition to expand and move out of the way.
I know that it would be possible to use margin/padding and multiple a classes to get each one to push the right amount around but I was hoping for a better / more responsive option.
If any more information is needed please ask!
a:link {
color: #000;
text-decoration: none;
transition: all .2s ease-in-out;
display: inline-block;
}
a:hover {
color: #000;
text-decoration: none;
transform: scale(1.1);
padding: 5px;
}
<p>Check out our website and if you have a question just click the 'Contact Us' link and we will do our best to respond with an answer. Thank You.</p>
Related
I'm currently attempting a do very specific kind of navigation bar for my website. The main 'feature' of it is that on hover over each menu item, the item itself grows, while both the item before and the item after moves x pixels away from the item.
The styling of these elements is what would perform these transformations, using the following:
.navitem{
display:inline;
transition: transform .75s ease-in-out;
}
.navitemRight {
transform: translate(10px);
}
.navitemLeft{
transform: translate(-10px);
}
.navitemCenter{
text-shadow:0px 0px 1px black;
transform: scale(1.20);
}
The problem is that there seems to be no way to apply these style whenever an item is hovered. It seems as though for each item, they should have these kind of stylings :
.item2 : hover ~ item 1{
blabla
}
.item2 : hover ~ item 3{
blabla
}
but they should generated somehow, since the navigation bar's items are dynamic.
I tried using React and really thought I was going to get away with it, where onMouseEnter and onMouseLeave changed the state of the component, and everytime, it would re-render the navbar, with the correct style, like so:
almost working but ugly when hover out
But it does not satisfy me because we only get the transform when hovering, and lose the transition whenever the state changes, which is why the change is so ugly when I hover out. For reference, here's an example of what it looks like when you have the same trasnform and transition:
simple transform
Anyways, I am sure there is a way to do it, using Javascript probably, maybe sass or Jquery, both of which im not really familiar with. If you have any idea, or maybe a reference to tools that could help me with that, it would be very apprecited!Thanks
You can apply conditional classes on each element, based on your component state. The conditional classes will be added/removed based on template string literals
Here's an example that does basically what you want, but through a different method. It's all in CSS so it will not have and rendering issues.
I've moved all .nav-links to the left 10px if they aren't being hovered (this is therefore their default state).
Once you hover on one this will increase in size by 1.2 as you would like.
All subsequent .nav-links after the hovered one (using the subsequent sibling selector ~) will move to the right by 10px to accomodate the increase in size.
You can fine tune this to your preferences, but at least it gives you a nice structure to work from and looks reasonably slick I think!
Demo
nav {
padding: 0px 24px;
}
.nav-link {
display: inline-block;
transition: transform .75s ease-in-out;
background: whitesmoke;
height:20px;
width:40px;
padding: 4px 8px;
text-align: center;
}
.nav-link:not(:hover) {
transform: translate(-10px);
}
.nav-link:hover {
transform: scale(1.2);
}
.nav-link:hover ~ .nav-link {
transform: translate(10px);
}
<nav>
<a class='nav-link'>Link</a>
<a class='nav-link'>Link</a>
<a class='nav-link'>Link</a>
<a class='nav-link'>Link</a>
</nav>
I have a problem and basically I want to do this
.buttonar {
background-color: #4CAF50; /* Green */
border: none;
color: #FFF;
padding: 16px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
-webkit-transition-duration: 0.4s; /* Safari */
transition-duration: 0.4s;
cursor: pointer;
}
.button2 {
background-color: #008CBA;
color: white;
border: 2px solid #008CBA;
}
.button2:hover {
background-color: white;
color: black;
}
<a class="buttonar button2" href="http://www.facebook.com" target="_blank" rel="alternate">button</a>
But the problem is, my website already has a template.css (Joomla website) in which styling for a, a:link, a:hover etc are already set. I want my button to appear exactly as on the code snippet output but I cannot seem to get it working as the link stays blue ((barely visible) set by template) or it only changes color when I hover over the link itself and not the button (created another class for a:link and a:hover).
Can anyone assist me please?
The 'C' in CSS stands for Cascading. This means that CSS will look at items at the top, then as it goes down the sheets, it will overwrite them.
This applies to how you put the files in your HTMl as well:
HTML
<head>
<!-- Insert Joomla CSS here -->
<!-- Insert your custom CSS here -->
</head>
This will apply the Joomla CSS first, but then your custom styles overwrite it.
On second read...
...if you're talking about just styling, the .button2 selects the element that has class="button2" in your HTML. Simply add that class in the HTML to the button you want styled and it will work.
You can inline your style in the button, and it will take precedence.
Check this.
The fix may be as simple as adding an !important to your css. This hijacks the cascading rules and should override your template.css rules.
Also, make sure that wherever you place your own css rules, place it AFTER template.css is called on your page. It may not be enough to place it anywhere in the head tags. I would first find out where template.css is being called (usually in a link tag) and place your own css with an !important marker after it.
For info on this: https://css-tricks.com/when-using-important-is-the-right-choice/
Sung
Best way to understand what I want is to watch this short six second video. Please ignore the font change in the video. http://www.youtube.com/watch?v=7KM78DKoVZU
What's the best way to go about making that rounded rectangle to show up behind the navigation link on hover? On hover, I could have the navigation button's background change to a background image with a rounded rectangle in the image, but before I go about that, I want to ensure there's no cleaner or easier way to go about this.
Thoughts? Thanks!
The rectangle isn't really showing up behind the nav link. What's really happening is the nav link's style is changing during the hover state.
#menu {
list-style: none;
display: inline-block;
background: #eee;
margin: 0;
padding: 0;
}
#menu li {
float: left;
padding: 10px 5px;
margin: 4px;
color: #222;
cursor: pointer;
}
#menu li:hover {
background: #ccc;
border-radius:6px;
}
Check out the jsFiddle for a live example.
http://jsfiddle.net/kGa67/
EDIT- I suppose the cleanest way is style both the ul and li as inline-block instead of floating the the li like I did. Use ems if you have a responsive design but beware that it doesn't always scale perfectly on very small and very large widths.
Check out this fiddle: http://jsfiddle.net/8PqkH/
It's easy to do.
nav a:hover{
background: #902;
color: #fff;
border-radius: .5em;
}
I've been searching for a good hour but no one seems to have had the same problem.
I am trying to change the text color of a link to grey, it is appearing blue however. I specifically want to achieve this by setting a class property of the link - I don't want custom css in the aspx file, and I don't want to set the style property of the link. (For the record I have tried both of these ways and they work).
//Site.css
.grey {
color: grey;
}
.button-link2 {
padding: 10px 15px;
background: #EFEFEF;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-transition-duration: 0.2s;
-moz-transition-duration: 0.2s;
-transition-duration: 0.2s;
text-decoration: none;
cursor: pointer;
}
And the link the way I would like it to work:
<a id="btnCancel" href="CMS-contentlist.aspx" class="grey button-link2">Cancel</a>
Thanks in advance!
you would either need to apply the text color to the element outside of the link or add the a attribute.
a.grey,
.grey {
...
}
Make this as important. Use only if it's necessary
//Site.css
.grey {
color: grey !important;
}
Just wanted to confirm that you have below piece:
a:link {color:#FF0000;} /* unvisited link */
a:visited {color:#00FF00;} /* visited link */
a:hover {color:#FF00FF;} /* mouse over link */
a:active {color:#0000FF;} /* selected link */
Is it the spelling mistake? Try "Gray" instead of "grey"
The problem is, you might have in the same Site.css other link settings that override yours. By default, there are such style properties defined for hyperlinks. Get rid of those, or use this:
#btnCancel.grey {
color: grey;
}
This type of problem is fairly easy to solve with a DOM inspection tool like Chrome Developer Tools. In Chrome, right-click on the element and select "Inspect element" and in the window that pops up you will be able to see all of the possible declarations that could be overrriding your .grey class's color declaration.
And be sure you know your CSS specificity rules really well.
do not use !important, if you can avoid it.
.grey
{
color:gray;
}
This will work.
I would like to create links that have icons included in the link.
For example, take a modified version of the chat/meta/faq links from Stack Overflow.
Here is one attempt.
HTML
<div id='clickable'>
<a href="#chat">
<div class='so-icon'></div>
chat
</a>
...
</div>
CSS
#clickable div {
display:inline-block;
vertical-align: middle;
}
.so-icon {
background-image:url(http://www.madhur.co.in/images/icon_stackoverflow3.png);
width: 30px;
height: 30px;
}
a {
text-decoration: none;
margin-right: 10px;
}
a:hover {
text-decoration: underline;
}
The one problem with this design is that the underline (hover over the link to see) appears on more than just the link text, but also on some whitespace before that.
A couple of solutions I can think of are:
Having two separate <a> elements, one for the icon, and one for the text. Violates DRY.
Not using a elements at all, but rather javascript, to implement the link functionality, while styling both the icon and text/span elements separately.
Isn't this something that should be possible to accomplish using CSS only, and not having to recourse to javascript?
Here we go, a solution with no additional markup or pseudo-elements, based on #sandeep's.
http://jsfiddle.net/z4Gs2/2/
like this??
http://jsfiddle.net/HBawG/
a p:hover {
text-decoration: underline;
}
I tried to edit your work
Hope i helped.
You can apply the background image directly to the tag. Something like this:
chat
meta
faq
with the CSS:
.so-icon {
background:url(http://www.madhur.co.in/images/icon_stackoverflow3.png) no-repeat left center;
width: 30px;
height: 30px;
}
a {
display: inline-block;
text-decoration: none;
padding-left: 35px;
margin:10px;
line-height: 30px;
}
a:hover {
text-decoration: underline;
}
You should remove the carriage return between your div (image) and your hyperlink text (to avoid undesired blank spaces)
Then you should modify the css of .so-icon class adding margin-right: 5px (for example)
You can find the modified version of your example here
http://jsfiddle.net/q2vE4/4/