I am trying to create a look with CSS that look like a "wetlook" fabric. The look should be shiny and somewhat like plastic.
Here is a image of the result which i strive for:
https://ibb.co/CM0pxpY
My idea is just to have a base color and then be able to layer the shiny effect over it, at best independent of the base color.
Example of base color:
.fabric {
width: 200px;
height: 200px;
background-color:#c40918;
}
<div class="fabric"></div>
https://codepen.io/dermanuel/pen/VwdQgPz
Alternatively, a semi-transparent image could be placed over it if this effect is not feasible using CSS.
Do you have any ideas on exactly how I could start doing this?
Related
Currently material select form field uses an arrow down which I believe it is done via css.
I would like to replace it with a different type of arrow, and I would like advice on what would be the best way to achieve this.
Here's what I am hoping to switch the original one for:
the original one is a solid triangle as seen in https://material.angular.io/components/select/overview
Thank you for any advice!
You have to understand something: The solid triangle for the mat-select, is not an image, its just pure CSS (or SCSS in this case).
Its just like how you create triangles and circles using CSS. Same procedure.
If you want to change the style, color etc, you can do it in the following way:
:host {
::ng-deep
mat-select.mat-select
> div.mat-select-trigger
> div.mat-select-arrow-wrapper
> div.mat-select-arrow {
color: red !important;
}
}
Here i changed the 'color' property. But you can play around with shapes of triangles too.
Here is the stackblitz: https://stackblitz.com/edit/angular-xkkagv?file=src%2Fapp%2Fselect-overview-example.scss
If you want it without ::ng-deep, you can use ViewEncapuslation.None in your component.ts file and play around too, which, in hindsight, may not be a good solution at the moment.
I have a challenge to implement colorized tables in a Kibana Dashboard and tried to find out the best approach in internet, but no glue up to now. So, since I wouldn't like to re-invent the wheels and create from scratch, I would like to hear from you an updated status for this implementation. By the way, I know that we can define a cell color based on its value, but it cannot be only the cell color, it must be all table lines or at least, one full line.
The challenge is to draw two simple tables in the same dashboard, one completely RED and a second all GREEN. Here is one table example:
Report example
Have you have figured out some way to define the background color to the tables into a kibana dashboard, a kibana visualisation component or even by deployment level customization by HTML or CSS files customization?
Here is one of the ways for solving this challenge. In order to figure out any additional formatting, I do suggest to use F12 in Chrome and debug some CSS statements.
CSS file to be changed:
/usr/share/kibana/optimize/bundles/light-theme.style.css
Let's consider the following tables titles
Table 1 title: "TOP_RED_TABLE"
Table 2 title: "BOTTON_GREEN_TABLE"
At the end of CSS file, add the following lines (replace the table titles below according with your definitions into the dashboard)
[data-title="TOP_RED_TABLE"],[data-test-subj="embeddablePanelHeading-TOP_RED_TABLE"] {
background-color:red;
color:white;
}
[data-title="BOTTON_GREEN_TABLE"], [data-test-subj="embeddablePanelHeading-BOTTON_GREEN_TABLE"] {
background-color:green;
color:white;
}
.table thead {
font-size: 14px;
background-color:black;
color:white;
}
.embPanel__title:not(:empty) {
font-size: 16px;
}
Good luck with your kibana customizations and please, post here any additional suggestions.
Tks
Marcelo
I'm working on a new web app and I'd like to create my GUI mockups in Illustrator then implement them in HTML5 and CSS3 using Twitter Bootstrap. I know how to use the CSS classes to create my pages but I'd like to know the process of customizing Twitter Bootstrap to match my mockups as much as possible. I'm talking about colors, typography, margins, padding, borders, button styles and so on. I'd like to create completely different themes for this and every future project I'll be working on.
I'm a programmer but I love GUI design too so I'd like to know how professional designers make all the pieces fit in.
Thanks in advance.
In order to get the most out of Bootstrap (especially the new "mobile first" features) I recommend using your Illustrator file as a jumping off point, rather than a spec.
I agree with the other commenter who suggested leaving the Bootstrap file in place and writing a second file with selective overrides. This is much easier with Bootstrap 3 since the flat design means less to clobber with your own declarations.
I always start with laying out a static version of the pages using plain Bootstrap then methodically cherry picking styles using the inspector (e.g. body backgrounds, typography, colors) in priority order as they stand out to me visually. I usually wind up with something that is close, but slightly different (often better), than the original design.
Good luck! If you don't fight it too hard, Bootstrap offers a lot out of the box.
I'm pretty new to Bootstrap but the general consensus seems to be to leave the actual Bootstrap.css intact and create different CSS files to override Bootstrap. For example in this snippet (SCSS by the way) I commented a section as "General" and placed some default overrides for my site. Most notably would be the restyled input boxes from rounded to square.
/********
GENERAL
*********/
html, body {
height: 100%;
}
.wrap {
position: relative;
overflow: hidden;
min-height: 100%;
}
body {
a {
color: #FF4329;
&:hover {
text-decoration: none;
}
}
input[type="text"], .btn {
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
}
}
Also note that you can customize the files you download from Bootstrap so if you plan on using on the the grid system then that's all you need to download.
If you're planning to use the grid system of Bootstrap, there're plugins for Photoshop and Illustrator that create guidelines for you (you can even specify the padding, number of columns and margin).
Bootstrap is based on CSS. When you design something in Illustrator, you'll have to export assets like images but it's important to make use of CSS also for the most things you can. Remember, it's faster to apply a CSS background-color instead of using an image for that purpose as background-image.
I make my scratches on paper and pass right away to html. With chrome developer tools you can easily change the css styles applied, apply new rules, etc
I am using twitter bootstrap for layout and css. But I like the foundation top bar navigation over what bootstrap provides. I tried to use the top bar code inside my html (built with bootstrap) and it messes up the layout. That is not surprising because both of them rely extensively on class named "row" and they have different properties.
One of the options I could think off is to override the row class some how in my style sheet but that would be too much of a work and doesn't seem right.
Other option might be using iframe.
Is there any other way this issue can be solved?
Ideally, you only need to use the top-bar CSS and JS code of Foundation, since that is the only component you mean to use. Here is the SCSS file (with dependancies on the variables declared in _settings.scss. Or you can use the generated CSS code.
If you still need to use .row, just copy the .row styling and name it different. I.e:
/* The Grid ---------------------- */
.foundation-row { width: 1000px; max-width: 100%; min-width: 768px; margin: 0 auto; }
Finally, dont't forget to include the jquery.foundation.topbar.js file and calling
$(document).foundationTopBar();
Old question but thought I'll share the latest if someone is looking for a seamless solution: Web Components
It's a bit of a more complex subject but will allow you to create widgets within completely isolated Shadow DOM's without overriding a thing. Read more about it
here and here. Then you'll be able to do something like this:
<template id="templateContent">
<style> #import "css/generalStyle.css"; </style>
</template>
Taken from this answer
Using an iframe for this is a bad idea. If you like the style for the Foundation top bar, just copy those styles into a custom class in your stylesheet.
Please note that you may have to override some of Bootstrap's default styles for the top bar to get it right.
So, is it possible to create archive (/binary array?) ones on server side and then send it + run-time generated HTML page. I think it is. And wondering if there's any libraries for that. Client side especially.
Core questions now are:
1. How to transfer image: as a js variable? Like var imagebinary = "3nmrnmfu5...."
2. How to turn image back from binary format and paste them where necessarily.
Now I'm thinking of using data: URL.
tomfumb suggested a brilliant solution that google uses: one "big" image that got caught into smaller pieces on client.
I think the technique you're looking for often gets called "CSS Sprites", and there are quite a few good articles on them around the place (just ask your favourite search engine). There are other methods using Javascript instead, but I quite like the CSS method myself.
There are quite a good articles at:
http://www.alistapart.com/articles/sprites
http://www.w3schools.com/css/css_image_sprites.asp
and many others.
The idea is to combine all the images into one larger image, then use CSS to control which parts of the larger image to display in any particular case.
Say you have four identical sized images, 1,2,3,4 (they don't have to be identical size but
it makes the explanation easier
Combine them into one larger image using your favourite server side image toolkit. Something like GD from PHP, or ImageMagick, or PIL if you're using Python. Most server side kits have a library that can combine images.
1234
Then create CSS rules that will display the relevant part of the bigger image on the client:
for example:
div.sprite { height:100px; width:100px; }
#image1 { background: url(bigimg.png) 0 0; }
#image2 { background: url(bigimg.png) -100px 0; width: 100px;}
#image3 { background: url(bigimg.png) -200px 0; width: 100px;}
#image4 { background: url(bigimg.png) -300px 0; width: 100px;}
and the HTML to display them:
<div id='image1' class='sprite'></div>
<div id='image2' class='sprite'></div>
<div id='image3' class='sprite'></div>
<div id='image4' class='sprite'></div>
It's the kind of thing it probably isn't too difficult to automate.