CSS Grid Hero Header image with multiple layouts on Codepen.io

I was recently asked to make a circular image with three categories that need some kind of contact button. Try to think of a brainstorm graph like this:

example brainstorm image for hero image
Example brainstorm image

The challenge when creating this image is how is it going to look on mobile and still allow a site visitor to click on a button (minimum height of 25 px). My solution to this was to shift the buttons to the left  and stack them vertically  while image and is still visible in the background.

With a little knowledge of the new CSS grid tools, and the new CSS grid inspector tools in Firefox 57.0, I was able to come up with this solution on codepen.io.   I used example code from labs.jensimmons.com to help build this project.

— Check out my new codepen!

Tell me what you think? I am not sure how to come up with the solution to avoid using the !important properties in the CSS media queries, but for now it works.

 

Advertisements

TESTING GUTENBERG

Today was great. I was able to make dinner for my wife and then take my dog for a long walk. After my walk, I went on the web and wanted to learn about CSS grid. I wanted to find a game that would help learning this new CSS tool which I have been heating a lot about. So I googled “CSS grid game” and found http://cssgridgarden.com/

After finishing the tutorial which took about 45 minutes to an hour to complete. I decided that this is a great tool to start studying how to use further.  I looked for examples of other work that was created with CSS grid and found mor10.com and the “Kuhn” theme which can found on github.
https://github.com/mor10/kuhn.

I watched a video by Morten Rand-Hendriksen which talked about progression of web development by embracing CSS grid. He truly seemed excited about this new tool. A little back story is that I have been following Morten on Lynda.com for a couple of years. His tutorials got me into working with WordPress.

On a side note, during Morten’s speech, he mentioned the new plugin for wordpress called “Gutenberg”. Gutenberg is a block text editor for content creation without all of the extra tools that come with WordPress. The TinyMCE editor comes to mind when using this text editing tool.

My initial thoughts about Gutenberg are that while the style is nice, the common keyboard shortcuts which are normally used don’t function quite as one would hope. An example of keyboard shortcut not working correctly is when selecting text using the select + left-right arrow keys the entire block of text above and below is selected. There is also a definite lag when using those shortcuts. I hope this works out better in the future but for now it is not really desirable in a production setting.

ASUS x550lb laptop 740m nVidia Driver Issue [Solved] FINALLY!!

[Solved] Finally a fix that got the 740m display driver working with the photoshop.

nvidia 740m display driver fixed [solved] for adobe photoshop cc
Finaly a fix for the integrated graphics display with nVidia 740m display driver.
I use photoshop pretty much and have the latest version (Adobe Photoshop CC 2015).  I also own an ASUS x550lb laptop with an  with an integrated graphics display (nVidia 740m and Intel HDR Graphics Family display adapters)

For the past year, there has been an issue where the nVidia display adapter would BSOD my machine. The last error was: Kernel_Security_Check_Failure 😦

I had disabled the nVidia adapter until today.  By following these two tips i was able to get both drivers working with current Adobe CC software.

windows 10 driver for 740m integrated graphics setup
Download newest driver from nVidia (Finally)

Here is a 740m fix from nVidia forums

Here are the steps to update the Nvidia Driver:

This is how i solved the error Code 43.

Follow the instruction and let me know.

Before do all this download the latest driver from Nvidia for your card http://www.geforce.com/drivers, DDU http://www.guru3d.com/files-details/display-driver-uninstaller-download.html and this program https://support.microsoft.com/en-us/kb/3073930

1. Put your pc offline

2. Go to device manager select your Nvidia Driver, go to Driver and Unistall on the next window click “No”.

3. Reboot your pc.

4. Go Online.. REALLY fast launch the troubleshooter then click Next to proceed and follow the instructions to hide the problematic NVIDIA drivers, they should be 2, if they are not redo the program..

5. Go to windows update and check the latest updates installed, if WU has already installed the nvidia driver you need to do everything again from the beginning..

6. Now launch DDU, reboot in safe mode and clean every NVIDIA driver, reboot.

7. Install the latest Nvidia driver for your card, reboot.

You are good to go.

Here is a 740m fix from adobe

  • Go to the location – C:\Program Files\Adobe\Adobe Photoshop CC 2015 , look for the file named sniffer.exe and move it on desktop.
  • Launch Photoshop and check

I would also suggest you to run Photoshop in administrator mode and check if it helps. You can follow the steps to run in admin mode:

a) Right click on the icon of Photoshop.

b) Click on “Run as admin” option.

Remove sniffer.exe and place on desktop. (I guess you can delete if this file)

The nVidia fix made my fan start blowing like crazy because it was able to finally upgrade correctly to the newest driver version. (10.18.13.6143 – 1/2/2016)

I checked my specs on my machine using Speccy.  The temperature of the nVidia driver before the newest driver was installed was 126 degres F.  Now, since the fan is whirring like mad to cool the finicky 740m, the operating temperature is now 103 degrees F.

[Edit] The fan was fixed because of this NVIDIA forum link

Step 1. Go to NVidia control panel

Step 2. Choose manage 3d settings

Step 3. In the global settings tab, find Power Management-mode and toggle selection to NVIDIA-driver-controlled

Step 4. Turn OFF Computer and then Turn ON computer.

DONE.

These two links and about 4 hours of going back and forth between the device manager and custom installed software, it WORKS! PROBLEM SOLVED.

Now if only i had done a youtube video of this process. I would upload it to help everyone out with this tricky dual display setup.

The steps that updated the NVIDIA driver still are somewhat difficult to get through but now they are done and everything is finally working corectly.  Only now the fan is whirring loudly!!

If anyone is having trouble with any of these steps, feel free to ask.

 

 

 

 

Windows Color Management Profile always resets

ICC Color profile does not stay loaded on windows PC.

Why is this happening?  I have come across many different sites and have done multiple “fixes” but nothing has helped keep my icc profile I created with a Datacolor Spyder 3 calibration device.

Here is a “fix” i tried: http://www.laszlopusztai.net/2009/08/23/stop-losing-display-calibration-with-windows-7/

I think the problem lies with the second monitor I use to connect my tv to my computer.  Everytime the vga cord is unplugged, the device calibration is refreshed due to a hardware change.  Constantly having to open windows color management to apply the default calibration every time the computer is locked, reset, or unplugged from vga, this manual default reset needs to be performed.

The issue may also lie with the machine I am running…

This is because the Asus machine I use has an intel AND a nvidia graphics card installed.  This dual graphics card setup has been causing issues with Adobe software for about 13 months now.

I read that the IGFX tray (Intel display) should be disabled from startup which could help this issue but it doesn’t seem to help.

This probably is an OS issue and could possibly be fixed with a registry change.  I have read that this change should not be attempted because of having to change something drastic on the machine.

If anyone else is having this issue, I’d love to know what you have done to try and fix!

datacolor, windows, pc, color management, intel, nvidia
Windows Color management profile window

One thing that has helped load the profile on startup is to allow the Calibration Loader 5.0 application by LOGO Kommunikations.  This actually works for the initial start/restart of the Windows OS (Windows 10).  Windows 10 color management seems to not have been touched since vista.  This will definitely be addressed in a feedback comment so if you are reading this and have the same issue, find the feedback I left and upvote it!  I just dont want to have to think about having the correct profile loaded, and would like to just keep this custom profile loaded.

Barn Painting Series 003

barn, digital painting, berks country, artist, corel painter, adobe photoshop cc
Barn Painting Series # 003 Created with Corel Painter 2015 | Photoshop CC

Here is another installment in my barn painting series. This was created first in photoshop were I adjusted the perspective, and distortion using the adaptive wide angle filter.  I also removed some distractions and added a couple ND filters to the sky and boosted the saturation.

Then, I brought the .jpeg into Corel Painter and did an auto painting with the smart soft chalk brush.  I used various brushes to complete this piece.  While thinking about organizing things better for next time, I came to the conclusion that I need to start creating my own personal brush sets for my favorite brushes.  I created a brush variant for the Queen Anne’s Lace flowers.

Here is the original photo I took on July 16th, 2010:

barks county, barn, photo, photographer
Barn Photo 003, Original Photo

Here’s the image before corel painter:

barks county, barn, photo, photographer
Barn Photo 003 edited for Corel painter

Barn Painting Series 002

Barn Painting #002
Barn Painting #002
Created with adobe photoshop| corel painter 2015

Exploring brushes in Corel painter 2015 and combining them with effects done in adobe photoshop cc. This barn is in Berks County.  I photographed it a couple of years ago while riding bike.  The simplicity of shaped with the birds silhouetted atop of the metal roof were captivating.  I was lucky to capture this image with them posing so nicely. The moon was not in this photo but I recently took a photo of the moon for my collection of reference images.  It worked out perfectly.  I feel as though I am making strides combining Corel Painter 2015 and Adobe Photoshop CC.

Here’s the original photo shot on July 17th, 2010:

Original Photo - Barn Series 002
Original Photo – Barn Series 002