How to shape a input text box like a pyramid?
Please see the image at
I want to make a contact form like as this image.
Please let me know how i can i do this.
Thanks in advance.
To make your contact form as displayed in the image. you have to be little tricky.
Please see the image below.
The highlighted part indicates the Size of your text-box. Rest is the CSS in your background and similar CSS for text box is applied so that it looks merged with the background CSS.
There are many ways to achieve this. Best thing that comes to my mind is that you can use this pyramid as a background of a div. Then place text boxes on that div. Style them to look like on the image,
.textbox{
background-color:transparent;
border:none;
color:white
}
is a example. You can use different width for different text boxes to get the desired look.
Related
So far, my main problem is that I am trying to adjust a table on Kintone.
I have been able to access the contents of the table (when you add table elements to it, you can see the colors changing, however the headers themselves do not seem to change).
Currently, I am using Kintone (Cybozu), however since it is using JSEdit, I think the problem can be solved with Javascript knowledge (which I very much do not have).
What do I want to do?
(please see the attached pictures)
Center, bold, and other adjustments to those headers.
If my code is completely wrong, please do ignore it and any code that will help this situation would be greatly appreciated.
enter image description here
enter image description here
From the code you shared, you get a table element as kintone.app.record.getFieldElement(field code of the table), but as for the table, it contains multiple elements.
Therefore, as with other fields, changing the style.backgroundColor of the acquired element will not change the color.
Could you try and apply the following CSS to get the desired process?
The header will be yellow with the CSS below, so please specify the color as desired.
.body-record-print .show-subtable-gaia th {
background-color: #FFFF00;
}
I hope this helps.
I am trying to mimic this look of the text split, I found the codepen.io for it but it uses SCSS and I am looking for it to be CSS only if possible. If someone could help me translate the code or make it so that is CSS, that would be great. Thanks for the help in advance.
While I am not going to write out all of the code for you I will suggest a method of doing it:
I suggest you make two div boxes, one for the filled in or solid text and one for the outlined text.
Then you set the color, font-family (Google Fonts is a good resource), font-size, and font-weight, to suit your needs for the first div.
On the second div again set the font-family, font-size, and font-weight to the same values, except set the color to transparent and add a colored border to the text. This will simulate the sort of outlined effect in the codepen.
Oh, and to make the two divs appear on the same line look at this answer.
While this will not automatically split the text between the two texts, it is a simple way to get a similar effect to what you want.
I am not sure if here is the best place to ask such question. But I have very little clue where to start with this and would appreciate if someone could point me to the right place.
And not sure what's the best search term for this.
I am trying to re-create such typography effect. If you look at "Organic", it changes fill color and spacing as the user scroll down the page. The fill color is filling half way in the text.
https://dribbble.com/shots/2623261-Landing-Page-Animation
Is CSS possible? Or SVG? If yes, what areas should I be investigating?
*Updated: I have found the article for this.
https://css-tricks.com/reverse-text-color-mix-blend-mode/
It is possible with CSS.
Check the answer here. It is simple effect.
Basically, you add multiple text. One with white and one with black color in different div and you add clipping to each div, so when you scroll, it appears like the effect you want.
I have a website that has a design like google web store. This is what it looks like:
if you'll notice in the bottom area the 2 boxes are not filling up the space above.
boxes is wrap by ul and items are in li. The list items are float by left and ul is has a clear.
Here is the link for jsfiddle http://jsfiddle.net/wTCKr/
Please suggest CSS or any JS that will fix this. Thank you.
If you want large boxes on the right, you will need to float them right so that the smaller boxes on the left will fill in correctly.
<li class="items big" style="float:right">
See this updated JS Fiddle fork.
This will not solve the problem if you put the big box in the middle. If you also need to support that case, I would suggest it's time to use absolute positioning and some jQuery or JS to do the layout for you.
Update: I enjoy a quick challenge, so I wrote some JS to do absolute positioning for you. I used jQuery, but you can convert it to straight JS if you don't use jQuery on your site. The code assumes that you have the right number of boxes in a valid order (eg. you can't put a big box on the last row if all the other rows are filled with small boxes).
You can do the ul { top: -200px or margin-top: -200px;} , which would work.
i'm trying to implement something like a door bell in a webpage. I have a background image of a door inside a div and I want to add an image of a doorbell that is clickable. I would also like to change the image in the button when it is currently clicked.
I tried using image buttons techniques i've found on the web which uses something like this:
<a id="bell" class="button" href="#"><span></span></a>
the anchor tag has a background property in the CSS which is the button image. But I cannot resize it with percentages. I want the door and door bell to resize according to page percentage. What's the best way to do this?
anchor elements aren't block level elements by default, if you set css on your anchor elements to display:block; you'll be able to its size in %. That said, without seeing exactly what you're trying to achieve it's difficult to give the best guidance - remember to ensure your mark up is semantically correct as 'button' elements may be more appropriate over anchor elements.