I need help writing a menu for my p5.js game I am working on. I haven't used p5.js before, and the jam I am working on ends in 2 days. If possible, I would like it as a rectangle rather than a stock button so it looks better.
Thanks in advance!
Edit: I have quit the jam, because I don't know anything much about p5.js.
I will still work on it though
Well you could use buttons for the menu and to have that flat color button you could use CSS.
sketch.js
function setup(){
button1 = createButton("something");
button1.class('button');
}
style.css
.button {
background-color: rgb(0, 168, 219);
color: white;
padding: 15px 32px;
text-decoration: none;
border: none;
}
Related
I believe, according to this stackoverflow answer, that WCAG 1.4.11 "Non-text Contrast" is intended for things like checkboxes, radios, etc. However, :hover is specifically mentioned, so I would like to clarify what I should do.
I have a button with a :hover css rule that changes the color property from #181B25 to #074ADF. Both colors have greater than 3:1 against the background color. However, against eachother, they have a ration of 2.49:1. Does this mean I am not meeting WCAG 1.4.11, as this :hover rule indicates the state of the button component changing?
No you are fine, technically there is no requirement for the contrast to change at all when hovering.
There is a full conversation about this on GitHub
Which relates to this piece of guidance:
This Success Criterion does not require that changes in color that differentiate between states of an individual component meet the 3:1 contrast ratio when they do not appear next to each other. For example, there is not a new requirement that visited links contrast with the default color, or that mouse hover indicators contrast with the default state. However, the component must not lose contrast with the adjacent colors, and non-text indicators such as the check in a checkbox, or an arrow graphic indicating a menu is selected or open must have sufficient contrast to the adjacent colors.
Source: https://www.w3.org/WAI/WCAG21/Understanding/non-text-contrast.html
As long as both states have sufficient contrast against the background and surrounding items it will pass WCAG.
If you think about it it makes sense, otherwise to create a AAA level button would require a contrast ratio of 4.5:1 with the background and then a further 4.5:1 contrast with the non-hovered state. That would mean all buttons would have to be practically black (or white if you had a dark background on the site) when hovered in order to match both criteria.
But WCAG isn't the end of it!
There are a few things you can do to improve accessibility (you don't have to stop at compliance, you can aim for "wowing" people who benefit from accessibility).
First thing is first, use cursor: pointer. This signifies something is clickable and it is now widely accepted that this is an acceptable / beneficial use.
The second thing you can do is use slightly different indication methods for hover vs focus.
So for example you can use border and outline in conjunction with each other to show the states of hover, focus, hovered and focused:
button{
background: #000;
border: 2px solid #fff;
color: #fff;
outline: none;
padding: 0.25rem 0.5rem;
cursor: pointer;
border-radius: 2.25rem;
font-size: 1.5rem;
margin: 2rem;
}
button:hover{
border: 2px solid #333;
}
button:focus{
outline: 2px solid #333;
outline-offset: 2px;
}
<button>Test button</button>
Alternatively a neat trick instead of using outline is to use box-shadow. The advantage is it works for curved corners:
button{
background: #000;
border: 2px solid #fff;
color: #fff;
outline: none;
padding: 0.25rem 0.5rem;
cursor: pointer;
border-radius: 2.25rem;
font-size: 1.5rem;
margin: 2rem;
}
button:hover{
border: 2px solid #333;
}
button:focus{
box-shadow: 0 0 0 2px #fff, 0 0 0 4px #000;
}
<button>Test with curves</button>
I don't like the stacked option as it needs a lot of white space
If having two different indicators doesn't work for your design you can just have different states (and give priority to the focus state).
button{
background: #000;
color: #fff;
outline: none;
padding: 0.25rem 0.5rem;
cursor: pointer;
border-radius: 0.25rem;
font-size: 1.5rem;
margin: 2rem;
border: none;
}
button:hover{
outline: 2px dashed #333;
}
button:focus{
outline: 2px solid #333;
}
<button>Different border styles</button>
Use your imagination! You could make the button shrink by a couple of pixels on hover (assuming it is implemented so it doesn't cause a layout shift), change the text style, but grow on focus, change the background to a pattern depending on state (but be careful with that one) etc.
Quick Tip: You will see that I made my buttons black and white. I find this is a great way to test / prototype different states.
I am designing a QGIS plugin. I am struggling to make the outer region of the UI to be grey (see image).
The QT file is:
A reference UI that I want to make my UI look like, all non-functional space is grey:
You simply need to add a stylesheet to your plugin. Right click on your widget and select 'Change stylesheet'. Add this stylesheet for turning your QTabWidget to grey.
QTabWidget {
border: 0px transparent black;
}
QTabWidget::pane {
border: 1px solid #76797C;
padding: 5px;
margin: 0px;
background-color: #D3D3D3;
}
I've some problem with border-radius function in firefox.
When i apply, it makes some kind of space, or border around the item.
Can somebody tell me that this is a firefox bug or is there some resolve for that?
Here is the problem:
JsFiddle
The
border-radius:50%;
line makes that, i am sure.
Seems to me that this is a FF issue at rendering shadows with border-radius.
You could try this simple trick :
The demo
Basically, you apply the grey shadow on the parent li, make it a bit finer and then move a bit the a.ch-item child in order to make it go over the gap.
.ch-grid > li {
box-shadow: 0px 0px 5px 15px rgba(255, 255, 255, 0.6);
border-radius: 50%;
width: 198px;
height: 198px;
}
.ch-item {
position: relative;
top: -1px;
left: -1px;
}
Of course, this is just for the idea. You might also want to apply the hover effect on the li element itself and move it 1px down and right to have a better result.
Edit : a better result
Quick question. Please see the example at http://www.urbanelementz.ca/ ...
The Image & Border I'm referring to is located on the top left of the main content area and has white text wrapping beside and below it.
Here's the URL to the image I'm talking about:
http://www.urbanelementz.ca/css/images/uelementz-index-colorefx1.png
I made the dotted border thicker and white so you can see what I'm talking about. I have a top margin and right margin set on the image so the text isn't right up against the image. How can I make the border go right up against (sit flush) with the image instead of around the image + the set margins. Without using padding as well if possible. I want to keep my margins set. Is there a way to fix this?
Thanks very much!
Add/edit CSS with:
img#colorfx1 {
padding: 0px;
margin-right: 10px;
}
img#colorfx1 {
border-collapse: collapse;
border-color: #FFFFFF;
border-style: dotted;
border-width: 3px;
float: left;
padding: 2px 5px 0 1px;
vertical-align: top;
}
Change padding to margin, and it looks good.
I think you intended to write margin in the first place.
I see this style applied:
img#colorfx1 {
border-collapse: collapse;
border-color: #FFFFFF;
border-style: dotted;
border-width: 3px;
float: left;
padding: 2px 5px 0 1px;
vertical-align: top;
}
Removing the padding fixed it for me...
Get rid of the padding on the image. Set padding to 0:
img#colorfx1 { padding: 0; }
From what I see you don't have margin set to that image. You do have padding set to it though.
Once you remove padding and use margin instead it should be fine.
I think if you set your css like this
img#colorfx1 {
padding: 0px;
margin: 0px 5px 0px 5px;
border: #FFFFFF dotted 3px;
float: left;
}
you can use pandding such as :
<img src="test.png" width="80" height="74" border="2" style="border-style:dotted; padding-left:5px">
this will appear same as what u want, here is some stuff also :
link
regards...
I have a meta-answer: yes, padding was your problem. You might be able to avoid asking this sort of question in the future if you start using a) Chrome's "Inspect Element" context menu command, or b) Firebug for Firefox, which is more or less the same thing. Look at the element's calculated style and you can see exactly what property makes your element behave the way it does.
I'm doing some stylistic text inside of rounded divs, where the text bumps right up against the top of the container. I've been able to control almost all content, nested divs, images set as backgrounds, etc, and had them all clip successfully, but this one has been giving me serious grief.
Using the old-school image borders or cover-ups is not a solution as we have dynamic graphical backgrounds. We need a solution to actually clip the text.
This is mostly visible in Firefox 3.x and older versions of Chrome
Here's the sample code to play with:
http://jsfiddle.net/vfp3v/1/
div {
-moz-border-radius: 45px;
border-radius: 45px;
background-color: #ccc;
font-size: 100px;
color: #777;
line-height: 70%;
overflow: hidden;
width: 257px;
}
the jank:
Notice it's been fixed in the new Chrome and FireFox 4 - the shui:
Most of our site users are Firefox 3.6, so would love to be able to provide an elegant solution for them as well. Any help appreciated! Cheers
This one works in FF 3.6: http://jsfiddle.net/vfp3v/15/
It has some drawbacks, as you can see in the second example (in FF 3.6) the clipped off border has a solid color, so if you are using some kind of background this might look ugly. Just take a look at it, it might fit your needs.
I just added a span:
<div><span></span>WXYZ</div>
and then positioned it over the text with a border in the same color as the background, and a displacement as big as the border:
div{
position:relative;
etc...
}
span{
position:absolute; display:block; width:100%; height:100%;
border:25px solid #fff; top:-25px; left:-25px;
-moz-border-radius: 70px; border-radius: 70px; /* 45 radius + 25 border */
}
edit: just tested this in chrome 10.0.6 (which has the clipping bug) and it worked!
In browsers that correctly support the border-radius the span (and it's border-color) isn't even visible because it is clipped off (overflow:hidden).