I have a contact form and I have it set exactly the way I like it, however the text is white, so when you type in it you cant see it. When you highlight it it is there so it is working, however people can't see what they are typing. I have it hosted here www.trutattoo.amdesigns.studio.com
and this is my CSS
form label,
form .label {
display: block;
margin-bottom: 20px;
}
input,
textarea {
margin-top: 20px;
font-family: 'Open Sans', sans-serif;
font-size: 14px;
font-weight: 800;
font-color: #000000;
border: 1px solid #000000;
outline: none;
-webkit-transition: border-color 0.2s;
-moz-transition: border-color 0.2s;
-ms-transition: border-color 0.2s;
-o-transition: border-color 0.2s;
transition: border-color 0.2s;
}
input[type="text"],
textarea {
padding: 10px;
width: 100%;
}
input[type="text"]:focus,
textarea:focus {
border-color: #161616;
}
input[type="checkbox"] {
display: none;
}
textarea {
margin-top: 20px;
height: 200px;
}
Just change
font-color: #000000;
border: 1px solid #000000;
000000 to any color you want.
Example change to #ff0000 is you want RED.
Hope it helps!
I am working on an app using ionic and i want to reproduce something similar to this horizontal scrolling card but i am quite lost as is not my solution. I am wondering if someone has been able to do something similar should shed some light.
You can use ion-slide-box .
You can customize the border,width, etc. For example I make invisible for:
.slider-pager {
display:none !important;
}
And add border, fix the margin:
.slider-slide {
padding-top: 80px;
color: #000;
background-color: #fff;
text-align: center;
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
font-weight: 300;
width: 200px !important;
border: 1px solid #000;
margin: 62px 56px
padding-left: 20px;
padding-right: 20px;
}
Have a nice coding and make your own custom style!
I am trying to make a handle bar element with a nice textured line pseudo element that is horizontally and vertically centered in the middle of it.
I understand that lots of people do this effect with background images but I want this to be vector so that it works even on high density displays.
Demo: jsFiddle
The whole thing just uses a single element and uses this CSS:
html, body
{
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}
*
{
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.header_handle
{
width: 100%;
height: 7px;
position: relative;
background: #9e978b;
border-top: 1px solid #b8b1a5;
border-bottom: 1px solid #827c72;
text-align: center;
cursor: s-resize;
}
.header_handle:before
{
content: '';
display: -moz-inline-stack;
display: inline-block;
vertical-align: middle;
zoom: 1;
*display: inline;
background: #ff0000;
width: 10px;
height: 100%;
}
.header_handle:after
{
content: '';
display: -moz-inline-stack;
display: inline-block;
vertical-align: middle;
zoom: 1;
*display: inline;
width: 42px;
height: 1px;
background: #ada599;
outline: 1px solid #ada599;
border-top: 1px solid #6b665e;
border-bottom: 1px solid #6b665e;
}
Here is a second demo that shows the basic effect in action at a bigger level. It just has aligning inline-block element and then the centered inline-block element.
The desired effect should look like this:
The first demo above works at heights above 22px and if you turn off the height attribute it expands to 22px so it seems to think the pseudo element is 22px or something like that.
What the heck is going on here?
Add font-size: 0; to the main element .header_handle. This eliminates any space between inline elements.
I got the trick from the Fighting the Space Between Inline Block Elements on CSS-Tricks.
I am working with GWT. i have a requirement where i need to show the button as below.Please help me how to achieve this?
Thanks!
You can use GWT Button class and style it the way you need. For example, if you're using UiBinder:
<g:Button ui:field="button" styleName="my-button">
<ui:msg key="myButtonMsg">Button</ui:msg>
</g:Button>
with your own css class like
.my-button {
background: green;
border: 1px solid green;
color: white;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
padding: 5px 15px 5px 15px;
font-weight: bold;
}
If you need the text to have white box around it then add <span> around button text and add color: black; and background-color: white; properties for the span.
I'm new to web design and I'm working on a small project, but I'm faced with a problem and I would appreciate any help.
So I have three div containers and I'm using them to show thumbnails of photos inside an album and I've given each one of them a CSS :hover selector and I want all three classes to run at once when the mouse is over any one of the divs. I tried to simulate a mouseover event but it didn't work and I tried to setattribute with javascript didn't work either. Here is my css.
#frame {
border: solid 2px black;
background-image:url(cpHDFLI6_mini.jpg);
background-repeat:no-repeat;
position:absolute;
top:87px;
right:183px;
left:auto;
display: block;
width: 60px;
height: 70px;
-o-transform: rotate(30deg);
-webkit-transform: rotate(30deg);
-moz-transform: rotate(30deg);
transform: rotate(30deg);
}
#frame1 {
border: solid 2px black;
background-image:url(20397.jpg);
background-repeat:no-repeat;
position:absolute;
top:75px;
right:228px;
left:auto;
display: block;
width: 60px;
height: 70px;
z-index:1;
}
#frame2 {
border: solid 2px black;
background-image:url(candle.jpg);
background-repeat:no-repeat;
position:absolute;
top:87px;
right:273px;
left:auto;
display: block;
width: 60px;
height: 70px;
-o-transform: rotate(-30deg);
-webkit-transform: rotate(-30deg);
-moz-transform: rotate(-30deg);
transform: rotate(-30deg);
z-index:0;
}
#frame2:hover {
opacity: 1;
-webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom,
from(transparent), color-stop(.7, transparent), to(rgba(0,0,0,0.4)));
-webkit-box-shadow: 0px 0px 20px rgba(255,255,255,0.8);
-moz-box-shadow: 0px 0px 20px rgba(255,255,255,0.8);
box-shadow: 0px 0px 20px rgba(255,255,255,0.8);
}
#frame1:hover {
opacity: 1;
-webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom,
from(transparent), color-stop(.7, transparent), to(rgba(0,0,0,0.4)));
-webkit-box-shadow: 0px 0px 20px rgba(255,255,255,0.8);
-moz-box-shadow: 0px 0px 20px rgba(255,255,255,0.8);
box-shadow: 0px 0px 20px rgba(255,255,255,0.8);
}
#frame:hover {
opacity: 1;
-webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom,
from(transparent), color-stop(.7, transparent), to(rgba(0,0,0,0.4)));
-webkit-box-shadow: 0px 0px 20px rgba(255,255,255,0.8);
-moz-box-shadow: 0px 0px 20px rgba(255,255,255,0.8);
box-shadow: 0px 0px 20px rgba(255,255,255,0.8);
}
If you don't understand what I want I can explain more.
NO Way to do it on CSS only. And Hover is not apply for DIV. Its for A, UL > LI...
You must know about Javascript or jQuery.
Mouse hover on 1 div then $.AddClass ( Active Class ) for ALL DIVS, and When Mouse Out of Div, $.RemoveClass for ALL DIVS.
If you don't know about jQuery or Javascript, you can ask here, we can help.
You can copy and paste it for DIv2 and Div3 about mouse move out and over too. If you understand on DOM, you can try $("div[name=3DIV]"). for shorter code , however I am not sure u understand the script or not, so I posted simple script but long code.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" /></script>
<script language="javascript">
$(document).ready(function() {
$("#divID1").mouseover(function() {
$("#divID1").addClass("ACTIVE_CLASS");
$("#divID2").addClass("ACTIVE_CLASS");
$("#divID3").addClass("ACTIVE_CLASS");
});
$("#divID1").mouseout()(function() {
$("#divID1").removeClass("ACTIVE_CLASS");
$("#divID2").removeClass("ACTIVE_CLASS");
$("#divID3").removeClass("ACTIVE_CLASS");
});
});
</script>