Transparent Textures<\/a>. This website allows you to overlay different colors over Subtle Patterns’ textures. If you have read this far, you really should go check them out. One thing you will notice immediately is that a color can look very different depending on the texture used.<\/p>\nHere is an example:<\/p>\n
[\/et_pb_text][et_pb_text admin_label=”green” _builder_version=”3.27.4″ text_font=”|on||on|” text_text_color=”#000000″ background_color=”#83c81a” background_size=”initial” background_position=”top_left” background_repeat=”repeat” text_orientation=”center” module_alignment=”center”]This is a bright green: #83C81A \n[\/et_pb_text][\/et_pb_column][\/et_pb_row][et_pb_row column_structure=”1_2,1_2″ admin_label=”Row” _builder_version=”3.25″ background_size=”initial” background_position=”top_left” background_repeat=”repeat” custom_padding=”6px||0px|”][et_pb_column type=”1_2″ _builder_version=”3.25″ custom_padding=”|||” custom_padding__hover=”|||”][et_pb_text admin_label=”3px tile” _builder_version=”4.6.5″ text_font=”|on||on|” text_text_color=”#ffffff” background_size=”initial” background_position=”top_left” background_repeat=”repeat” text_orientation=”center” module_alignment=”center” custom_css_main_element=”background:url(https:\/\/brooklyndesign.studio\/wp-content\/uploads\/2020\/09\/3px-tile.png) repeat #83C81A !important;”]<\/p>\n
Same green as above<\/p>\n
Texture = 3Px Tile<\/p>\n
[\/et_pb_text][et_pb_text admin_label=”brick wall” _builder_version=”4.6.5″ text_font=”|on||on|” text_text_color=”#ffffff” background_size=”initial” background_position=”top_left” background_repeat=”repeat” text_orientation=”center” module_alignment=”center” custom_css_main_element=”background:url(https:\/\/brooklyndesign.studio\/wp-content\/uploads\/2020\/09\/brick-wall-dark.png) repeat #83C81A !important;”]<\/p>\n
Same green as above<\/p>\n
Texture = Brick Wall Dark<\/p>\n
[\/et_pb_text][\/et_pb_column][et_pb_column type=”1_2″ _builder_version=”3.25″ custom_padding=”|||” custom_padding__hover=”|||”][et_pb_text admin_label=”crisp paper ruffles” _builder_version=”4.6.5″ text_font=”|on||on|” text_text_color=”#ffffff” background_size=”initial” background_position=”top_left” background_repeat=”repeat” text_orientation=”center” module_alignment=”center” custom_css_main_element=”background:url(https:\/\/brooklyndesign.studio\/wp-content\/uploads\/2020\/09\/crisp-paper-ruffles.png) repeat #83C81A !important;”]<\/p>\n
Same green as above<\/p>\n
Texture = Crisp Paper Ruffles<\/p>\n
[\/et_pb_text][et_pb_text admin_label=”carbon fibre” _builder_version=”4.6.5″ text_font=”|on||on|” text_text_color=”#ffffff” background_size=”initial” background_position=”top_left” background_repeat=”repeat” text_orientation=”center” module_alignment=”center” hover_enabled=”0″ custom_css_main_element=”background:url(https:\/\/brooklyndesign.studio\/wp-content\/uploads\/2020\/09\/carbon-fibre.png) repeat #83C81A !important;” sticky_enabled=”0″]<\/p>\n
Same green as above<\/p>\n
Texture = Carbon Fibre<\/p>\n
[\/et_pb_text][\/et_pb_column][\/et_pb_row][et_pb_row admin_label=”Row” _builder_version=”3.25″ background_size=”initial” background_position=”top_left” background_repeat=”repeat” custom_padding=”6px||0px|”][et_pb_column type=”4_4″ _builder_version=”3.25″ custom_padding=”|||” custom_padding__hover=”|||”][et_pb_text admin_label=”wrap up” _builder_version=”3.27.4″ text_text_color=”#000000″ text_font_size=”18″ text_line_height=”1.8em” background_size=”initial” background_position=”top_left” background_repeat=”repeat” text_font_size_tablet=”16″ text_font_size_phone=”14″ text_font_size_last_edited=”on|phone”]<\/p>\n
For your information, a background texture is created by repeating\/tiling a small image with transparency along both the X and Y-axis so it covers the area that it is applied to. All WordPress themes have a customizer option that will allow you to add a universal background image\/texture. If you, like me, would like to use different texture and color backgrounds within different sections of a webpage or website, you can use this little snippet of CSS code that is cross browser compatible.<\/p>\n
\nbackground:url(link to texture<\/em>) repeat #color hex code<\/em> !important;<\/p>\n<\/blockquote>\nAll of the green texture blocks in this post were created with this code. Please share links If you have used textures on your website.<\/p>\n
[\/et_pb_text][et_pb_divider color=”#ff4600″ disabled_on=”on|on|off” admin_label=”Divider” _builder_version=”3.2″][\/et_pb_divider][\/et_pb_column][\/et_pb_row][et_pb_row column_structure=”2_3,1_3″ admin_label=”Row” _builder_version=”3.25″ background_size=”initial” background_position=”top_left” background_repeat=”repeat” custom_padding=”0px|||”][et_pb_column type=”2_3″ _builder_version=”3.25″ custom_padding=”|||” custom_padding__hover=”|||”][et_pb_text admin_label=”PS” _builder_version=”3.27.4″ text_font_size=”18″ background_size=”initial” background_position=”top_left” background_repeat=”repeat” text_font_size_tablet=”16″ text_font_size_phone=”14″ text_font_size_last_edited=”on|phone”]<\/p>\n
PS:<\/strong> I wanted to explain myself in case you are wondering why I picked this image to represent this post. For me, everything about this photo makes me think of textures:<\/em><\/p>\n\nthe wood chips behind the retaining wall<\/em><\/li>\nthe polished granite surface<\/em><\/li>\nthe suede shoes<\/em><\/li>\nthe fabric of the socks, sweater, jacket, jeans and shirts<\/em><\/li>\nthe interlocking paving stones on the ground<\/em><\/li>\n<\/ul>\n[\/et_pb_text][\/et_pb_column][et_pb_column type=”1_3″ _builder_version=”3.25″ custom_padding=”|||” custom_padding__hover=”|||”][et_pb_image src=”https:\/\/brooklyndesign.studio\/wp-content\/uploads\/2019\/04\/texture.jpg” align_tablet=”center” align_phone=”” align_last_edited=”on|desktop” admin_label=”Image” _builder_version=”3.23″ hover_enabled=”0″ animation=”off” sticky=”off” use_border_color=”off” border_color=”#ffffff” border_style=”solid” always_center_on_mobile=”on” sticky_enabled=”0″][\/et_pb_image][et_pb_text admin_label=”lovely colors” _builder_version=”3.27.4″ text_font_size=”18″ background_size=”initial” background_position=”top_left” background_repeat=”repeat” text_font_size_tablet=”16″ text_font_size_phone=”14″ text_font_size_last_edited=”on|phone”]And also the colors are lovely! \ud83d\ude42<\/em> \n[\/et_pb_text][\/et_pb_column][\/et_pb_row][\/et_pb_section]<\/p>\n","protected":false},"excerpt":{"rendered":"Those of us gifted with five (or six) senses know both the natural and man-made world around us by seeing, touching, tasting, smelling, and listening to it. When it comes to websites, we can only see and sometimes listen to them. I feel that the visual experience of…\t\t\t\t\t\t<\/p>\n","protected":false},"author":1,"featured_media":2774,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_et_pb_use_builder":"on","_et_pb_old_content":"","_et_gb_content_width":"","footnotes":""},"categories":[3],"tags":[],"yoast_head":"
Why Textures are a Good Idea - Brooklyn Design Studio<\/title>\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n\t \n\t \n\t \n \n \n \n \n \n\t \n\t \n\t \n