I was wondering how I could change the thickness of the arrow on my website which is used as a scroll button. I would like something similar to this websites arrow in terms of thickness. example of arrow
Here is my codepen
.next {
position:absolute;
bottom:0;
left:50%;
margin-left:-40px;
transform:rotate(-90deg);
cursor:pointer;
}
Kind Regards,
Liam.
In the example you linked to an arrow is implemented differently than in your pen. Here's how it's done:
#arrow {
border: 3px solid black;
height: 50px;
width: 50px;
transform: rotate(45deg) translateY(-15px) translateX(5px);
border-top: none;
border-left: none;
}
<div id="arrow"></div>
Basically, you create a square, turn it 45 degrees and add a border on right and bottom sides. Now you can just change border thickness in the border property to change the arrow width.
P.S. you can use Chrome Developer Tools to inspect elements on websites. I.e. if you like how something looks on some website, you can just see how they implemented it.
You just need to set the font-size and perhaps font-weight properties since the arrow you are showing is a character
Those next elements on your codepen are text so the property you would have to use would be font-size: 10px;
I would also recommend using the html down triangle character: ▼
Test this:
<style>
body{ background-color: #DFBF90;}
#arrow {
height: 50px;
width: 112px;
color: white;
border-top: none;
border-left: none;
margin: 100px;
font-size: 74pt;
transform: rotateX(63deg) rotate(90deg);
}
</style>
<div id="arrow">></div>
Related
`
/* Button */
.button {
margin: 1em 0em;
}
.circle {
width: 50px;
height: 50px;
border-radius: 50%;
background: #1A718A;
position:relative;
}
.button h3{
position:relative;
top:3.4em;
left:.5em;
color: white;
font-weight: 400!important;
font-size:.9em!important;
z-index: 1;
}
.circle:hover {
position:relative;
top:1em;
left:3em;
}
<div class="button">
<div class="text"><h3>- View <span>Work</span></h3></div>
<div class="circle"></div>
</div> <!--button-->
`How do I create this hover button Using HTML, css and javascript.
The circle moves to the right(no effects) whilst the view turns grey and the work turns white(inverse).
Also a code newbie :)
Default State
Hover state
Thankyou
Recreation
HTML
We want to animate an element and its text "- View Work", so the simplest HTML we can have is:
<p>- View Work</p>
Styling
Default style
We can then style it as much as necessary. To place the line in the middle, we can trick a little by setting line-height to the element's height with a bit of JavaScript:
const p = document.querySelector('p');
p.style = '--height:' + getComputedStyle(p).getPropertyValue('height');
p {
position: relative;
border: 1px solid black;
color: black;
background-color: #f3f3f3;
width: 14rem;
height: 10rem;
font-weight: bold;
font-family: sans-serif;
text-align: center;
line-height: var(--height);
text-transform: uppercase
}
<p>- View Work</p>
With flashlight-effect
Now we want to add the circle, in which the text's color is different.
We could probably use mix-blend-mode in some way, however I don't understand it well enough to make it work with it.
Because of that, we fall back to using pseudo-elements (more specifically, ::after).
The pseudo-element needs to ...:
... have the same text in a different color, and have the texts overlap
... be big enough to fit the revealing circle in all its positions inside
... clip out the rest not inside the revealing circle
The first two bullet points are as simple as styling the pseudo-element and the parent mostly the same way.
To get the text, we can again use JavaScript by setting a custom data-attribute (e.g. data-text) to have the text. The pseudo-element can then display the text with content: attr(data-text).
For the revealing circle, we give the pseudo-element a background-color. Then, we use clip-path to cut out what should be "revealed".
And on hover, we transition between two different positions of the revealing circle.
const p = document.querySelector('p');
p.dataset.text = p.innerText;
p.style = '--height:' + getComputedStyle(p).getPropertyValue('height');
p {
position: relative;
border: 1px solid black;
color: black;
background-color: #f3f3f3;
}
p, p::after {
width: 14rem;
height: 10rem;
font-weight: bold;
font-family: sans-serif;
text-align: center;
line-height: var(--height);
text-transform: uppercase
}
p::after {
content: attr(data-text);
position: absolute;
top: 0;
left: 0;
color: white;
background-color: #1A718A;
clip-path: circle(3rem at 70px 55px);
transition: clip-path 0.15s;;
pointer-events: none;
}
p:hover::after {
clip-path: circle(3rem at 155px 100px);
}
<p>- View Work</p>
End note
This sample-code only works for one-liners, and requires the element to have a fixed size.
The effect can also be achieved by using mostly JavaScript, where one could mock-up such
a pseudo-element with actual HTML-elements, and then overlay said element over the original.
JSFiddle here
I'm trying to add tooltips to an existing page. We already use bootstrap 2.3 so it seemed like the obvious choice.
My html looks like this, say:
<script>
//initialize tooltips
$(document).ready(function(){
$('.my_button').tooltip();
});
<div class="my_button_row">
buttonnnnn
</div>
and my CSS looks like:
.my_button_row{
height: 100px;
border-bottom: 1px solid #E5E5E5;
width: 500px;
display: table;
border-collapse: separate;
border-spacing: 20px 5px;
}
.my_button {
background: linear-gradient(to bottom, #3FACF5, rgba(56, 101, 131, 0.76)) repeat scroll 0% 0% #3498DB; border-radius: 34px;
box-shadow: 4px 4px 4px #666;
color: #FFF;
font-size: 26px;
padding: 10px 10px;
text-decoration: none;
display: table-cell;
margin: 10px;
white-space: normal !important;
word-wrap: break-word;
text-align: center;
vertical-align: middle;
height: 100px;
max-width: 180px;
min-width: 15%;
line-height:26px
}
.my_button_green{
background: linear-gradient(to bottom, #63F53F, rgba(79, 131, 56, 0.76)) repeat scroll 0% 0% #61DB34
}
When I mouseover the button, the tooltip displayed just as I wanted first time, but the styling on the button itself also appears to change - as you can see from the jsfiddle - how can I stop this from happening?
Edit: I really would prefer a solution that doesn't involve totally changing the way the page is laid out (i.e. 'just remove 'display:block from the container element' is a much less straightforward solution than this simplified JSfiddle would make it appear ) - a solution that doesn't modifying the HTML would be ideal.
Delete display: table; from .my_button_row{ ... or add
data-container="body" to
buttonnnnn
You just have to give width: 500px; to my_button class and remove
// max-width: 180px;
// min-width: 15%;
Check out the fiddle
EDIT:
According to your requirement from the comments:
Adjusted the padding instead of giving width statically
Updated Fiddle
Add display: block to .my_button.
You'll have to fiddle around with the margins and padding to get the text in the center of the button, but this will fix your issue. Also keep in mind that with display: block, the button will be at most 180px wide due to yourmax-width style.
Thats happening because you have used display:table-cell css property for the button while the tooltip is being appended as display:block element.
Simply use display:block for .my_button(or remove the display:table property from .my_button_row) and you are good to go
Updated fiddle
I have a webkit appearance issue. What I am trying to accomplish is to use a division as a contenteditable division with the webkit appearance of a textarea. This works wonderfully until I attempt to remove the background. I can change colors without issue but removing it is proving futile. I have tried using a transparent image for the background but the appearance of the text area seems to overwrite it to a specific color.
The question is, is it possible to set the css to background: none; when using appearance.
I put together a jsfiddle as a bit of further explanation.
.div1 {width: 350px;
height: 100px;
-webkit-appearance: textarea;
resize: both;
overflow: auto;}
jsfiddle
PS. I hope I did this right : )
Don't use -webkit-appearance.
WebKit is applying the default styling for a textarea to your div.
CSS
.div1 {
width: 350px;
height: 100px;
background: none;
resize: both;
overflow: auto;
font-family: monospace;
border: 1px solid #000;
}
textarea {
background: none;
width: 350px;
height: 100px;
}
JSFiddle: http://jsfiddle.net/howderek/eMkv3/5/
Just change the color of your background to
background-color: rgba(255, 255, 255, 0);
This will make the background transparent. If it's going to be zero alpha (opacity) you can make the RGB whatever color you want.
http://jsfiddle.net/eMkv3/7/
Here's a screenshot of what it looks like on my browser:
How do we use just CSS to achieve the effects shown in this image: http://i.stack.imgur.com/smWmQ.gif (I'm sure that image is created with CSS because I visited that site with images disabled in Chrome)
Here is a simple very efficient way of doing it.
Fiddle
UPDATE:
Here is an example:
the html
<div>
<span class='tip'></span>
</div>
the css
div {
height: 30px;
width:50px;
}
.tip {
display:block;
width:1px;
heigth:20px;
border-left: 30px solid #fff;
border-right: 30px solid #fff;
border-top: 25px solid #F00;
}
There is something similar I took from the jQuery Ketchup plugin.
The CSS looks like this:
.box span {
border-color: rgba(255, 0, 0, 0.6) transparent -moz-use-text-color;
border-left: 0 solid transparent;
border-right: 15px solid transparent;
border-style: solid solid none;
border-width: 10px 15px 0 0;
display: block;
height: 0;
margin-left: 10px;
width: 0;
}
.box ul {
background: none repeat scroll 0 0 rgba(255, 0, 0, 0.6);
border-radius: 5px 5px 5px 5px;
color: #111111;
font-family: Helvetica,Arial,sans-serif;
font-size: 12px;
line-height: 16px;
list-style: none outside none;
margin: 0;
padding: 10px;
text-align: left;
}
The according HTML:
<div class="box">
<ul>
<li>Content</li>
</ul>
<span></span>
</div>
Also have a look at the JSFiddle.
The triangle you see is just a box, often with no size, with really degenerate and different border-widths. For example to make an upward-pointing triangle, you would make a make a box like so:
top
_____
left| / \ |right
|/___\|
bottom
The box has no size, a top-border-width of 0, and non-zero values for the other widths. The border-color of the left and right and top are transparent, so you can't see those triangles. All you can see is the bottom border.
Working example: http://jsfiddle.net/NnGyv/
Unfortunately, you cannot use percentages with border widths, or else you could achieve a reusable CSS class definition.
Most browsers can do this automatically with HTML5 validation. You won't have much control over how it looks but it's 1000x easier to code and works without Javascript.
If you want more visual control there's jQuery Tools Validator. Although this uses Javascript it should fall back to HTML5 if Javascript is disabled.
The original site may be using HTML5.
HTML5 has some pretty neat features for client-side form validation. This looks very much like Chrome's take on an input box with the "required" attribute set. You'll also note a placeholder (another HTML5 attribute).
jsFiddle example. You can find out more information from Dive into HTML5.
I want to change the color of the scrollbars on my pages in Internet Explorer and Firefox.
This code creates scrollbars:
<div style="overflow: auto; width: 750px; height: 400px">
</div>
To change their color, I tried this code:
<STYLE TYPE="text/css">
BODY
{
scrollbar-base-color: orange;
scrollbar-arrow-color: green;
scrollbar-DarkShadow-Color: blue;
}
</STYLE>
The above code is in my header, but it didn't change the scrollbars' color.
Can anyone help me?
For Chrome and Safari you can change the scrollbar style using this code:
/* Chrome, Safari */
::-webkit-scrollbar {
width: 15px;
height: 15px;
}
::-webkit-scrollbar-track-piece {
background-color: #C2D2E4;
}
::-webkit-scrollbar-thumb:vertical {
height: 30px;
background-color: #0A4C95;
}
Just as others said, the CSS you posted won't work on modern browsers (IE8, Safari, Firefox, etc). Since you're trying to scroll a div, you do, however, have the option of making a custom scrollbar in Javascript/DHTML. A quick Google search reveals a few have done just that like this one: http://www.hesido.com/web.php?page=customscrollbar
Just copy and paste after head for
1.rounded corners style
<style type="text/css">
::-webkit-scrollbar {width: 6px; height: 4px; background: #ffffff; }
::-webkit-scrollbar-thumb { background-color: #000000; -webkit-border-radius: 1ex; }
</style>
2.square corners with border style
<style type="text/css">
::-webkit-scrollbar {width: 9px; height: 3px; background: #FFFFFF;}
::-webkit-scrollbar-thumb {background-color:#ffffff ; border: 1px solid black;}
</style>
you can change the color for code click here or here
That code only works in Internet Explorer. Are you testing in Firefox or Safari by chance?
It works in IE5 to 7. It has been discontinued in IE8. Safari recently gave support for it using different css properties I believe.
There are usability concerns with changing the scrollbar colour.
Create a class for the div, code the scrollbar colors in that class, then apply it to the div. You are not changing the scrollbar colors on the browser, only the div you are creating. Your div would be <div style="overflow: auto; width: 750px; height: 400px" class="className"> </div>
In your class you would create the scrollbar colors using the applicable scrollbar part names, i.e. scrollbar-face-color and so on. To find out which code applies to which area of the scroll check http://iebar.discoveryvip.com/, or you can search on the web, there are a number of places for that.
This code was easyer just paste after
< h e a d >
<style type="text/css">
::-webkit-scrollbar {width: 6px; height: 4px; background: #ffffff; }
::-webkit-scrollbar-thumb { background-color: #000000; -webkit-border-radius: 1ex; }
</style>
Try this
*, html {
scrollbar-face-color: #FF0000;
scrollbar-shadow-color: #0000FF;
scrollbar-highlight-color: #00FF00;
scrollbar-3dlight-color: #FF00FF;
scrollbar-darkshadow-color: #00FFFF;
scrollbar-track-color: #FFFF00;
scrollbar-arrow-color: #000000;}
enter code here
html,body{
scrollbar-face-color: #414340;
scrollbar-shadow-color: #cccccc;
scrollbar-highlight-color: #cccccc;
scrollbar-3dlight-color: #cccccc;
scrollbar-darkshadow-color: #cccccc;
scrollbar-track-color: #cccccc;
scrollbar-arrow-color: #000000;
}
We can change color of scrollbar using javascript also. There are various components in scroll bar like base color, face color, arrow color etc that changes color of various parts of scroll bar. The following lines might help you.
document.body.style.scrollbarBaseColor = "colorname";
document.body.style.scrollbarArrowColor = "colorname";
document.body.style.scrollbarTrackColor = "colorname";
Apart from the above styles, you will have scrollbarShadowColor, scrollbarHighlightColor, scrollbar3dlightColor,scrollbarDarkshadowColor etc. So, choose your component of scroll bar and change the color of it.